Merge pull request #1230 from Patternslib/fix-pat-depends

fix(pat-depends): Listen and dispatch input instead of change events.

src/pat/depends/depends.js

@@ -36,24 +36,22 @@ class Pattern extends BasePattern {
         this.set_state();
 
         for (const input of this.handler.getAllInputs()) {
+            // Note: One input can be a dependency for multiple other dependent
+            // elements. Therefore we need to bind the events not uniquely and
+            // add a uuid to the event bindings id.
+
             events.add_event_listener(
                 input,
-                "change",
-                `pat-depends--change--${this.uuid}`, // We need to support multiple events per dependant ...
-                this.set_state.bind(this)
-            );
-            events.add_event_listener(
-                input,
-                "keyup",
-                `pat-depends--keyup--${this.uuid}`, // ... therefore we need to add a uuid to the event id ...
+                "input",
+                `pat-depends--input--${this.uuid}`,
                 this.set_state.bind(this)
             );
 
             if (input.form) {
                 events.add_event_listener(
                     input.form,
                     "reset",
-                    `pat-depends--reset--${this.uuid}`, // ... to not override previously set event handlers.
+                    `pat-depends--reset--${this.uuid}`,
                     async () => {
                         // TODO: note sure, what this timeout is for.
                         await utils.timeout(50);
@@ -77,8 +75,9 @@ class Pattern extends BasePattern {
         const inputs = dom.find_inputs(this.el);
         for (const input of inputs) {
             input.disabled = false;
-            // Trigger the change event after disabling so that any other bound actions can react on that.
-            input.dispatchEvent(events.change_event());
+            // Trigger the input after disabling so that any other bound
+            // actions can react on that.
+            input.dispatchEvent(events.input_event());
         }
         if (this.el.tagName === "A") {
             events.remove_event_listener(this.el, "pat-depends--click");
@@ -96,8 +95,9 @@ class Pattern extends BasePattern {
         const inputs = dom.find_inputs(this.el);
         for (const input of inputs) {
             input.disabled = true;
-            // Trigger the change event after disabling so that any other bound actions can react on that.
-            input.dispatchEvent(events.change_event());
+            // Trigger the input after disabling so that any other bound
+            // actions can react on that.
+            input.dispatchEvent(events.input_event());
         }
         if (this.el.tagName === "A") {
             events.add_event_listener(this.el, "click", "pat-depends--click", (e) =>

src/pat/depends/depends.test.js

@@ -239,9 +239,9 @@ describe("pat-depends", function () {
             const button2 = document.querySelector("[name=extra]");
 
             button1.checked = true;
-            button1.dispatchEvent(new Event("change"));
+            button1.dispatchEvent(new Event("input"));
             button2.checked = true;
-            button2.dispatchEvent(new Event("change"));
+            button2.dispatchEvent(new Event("input"));
 
             expect(dom.is_visible(dep1)).toBe(true);
             expect(dom.is_visible(dep2)).toBe(true);
@@ -250,7 +250,7 @@ describe("pat-depends", function () {
             // Even though button2 is still checked, the visibility of dep2 is
             // hidden.
             button1.checked = false;
-            button1.dispatchEvent(new Event("change"));
+            button1.dispatchEvent(new Event("input"));
 
             expect(dom.is_visible(dep1)).toBe(false);
             expect(dom.is_visible(dep2)).toBe(false);