fix(pat-depends): Support updating for sub-pat-depends when the parent state is changed.

Author: thet

src/pat/depends/depends.js

@@ -77,6 +77,8 @@ 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());
         }
         if (this.el.tagName === "A") {
             events.remove_event_listener(this.el, "pat-depends--click");
@@ -94,6 +96,8 @@ 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());
         }
         if (this.el.tagName === "A") {
             events.add_event_listener(this.el, "click", "pat-depends--click", (e) =>

src/pat/depends/depends.test.js

@@ -1,4 +1,5 @@
 import $ from "jquery";
+import dom from "../../core/dom";
 import pattern from "./depends";
 import utils from "../../core/utils";
 
@@ -187,4 +188,73 @@ describe("pat-depends", function () {
             expect(data.enabled).toBe(false);
         });
     });
+
+    describe("5 - Support pat-depends within a pat-depends controlled tree.", function () {
+
+        it("Also updates pat-depends within a pat-depends controlled tree", async function () {
+
+            document.body.innerHTML = `
+                <div data-pat-depends="action: both">
+                    <label>
+                        <input
+                            name="show-tree"
+                            type="checkbox"
+                        />
+                        show
+                    </label>
+
+                    <fieldset
+                        class="dep1 pat-depends"
+                        data-pat-depends="condition: show-tree"
+                    >
+                        <label>
+                            <input
+                                name="extra"
+                                type="checkbox"
+                            />
+                            Extra
+                        </label>
+                    </fieldset>
+
+                    <!-- This pat-depends node controlled by a checkbox which is
+                         within another pat-depends controlled tree.
+                    -->
+                    <p
+                        class="dep2 pat-depends"
+                        data-pat-depends="condition: extra"
+                    >
+                        You shose extra!
+                    </p>
+                </div>
+            `;
+
+            const dep1 = document.querySelector(".dep1");
+            new pattern(dep1);
+            await utils.timeout(1); // wait a tick for async to settle.
+            const dep2 = document.querySelector(".dep2");
+            new pattern(dep2);
+            await utils.timeout(1); // wait a tick for async to settle.
+
+            const button1 = document.querySelector("[name=show-tree]");
+            const button2 = document.querySelector("[name=extra]");
+
+            button1.checked = true;
+            button1.dispatchEvent(new Event("change"));
+            button2.checked = true;
+            button2.dispatchEvent(new Event("change"));
+
+            expect(dom.is_visible(dep1)).toBe(true);
+            expect(dom.is_visible(dep2)).toBe(true);
+
+
+            // Even though button2 is still checked, the visibility of dep2 is
+            // hidden.
+            button1.checked = false;
+            button1.dispatchEvent(new Event("change"));
+
+            expect(dom.is_visible(dep1)).toBe(false);
+            expect(dom.is_visible(dep2)).toBe(false);
+        });
+
+    });
 });