fix(pat-autofocus): Refocus on DOM updates by other Patterns.

Set the focus if appropriate when the DOM has changed and a pat-update
event has thrown. Please note, this does not use an IntersectionObserver
but relies on other Patterns using the pat-update event. This behavior
got lost in Patternslib 6.1 and is now restored.

Fixes: #1092

Author: thet

src/pat/autofocus/autofocus.js

@@ -1,3 +1,4 @@
+import $ from "jquery";
 import { BasePattern } from "../../core/basepattern";
 import dom from "../../core/dom";
 import registry from "../../core/registry";
@@ -22,6 +23,16 @@ class Pattern extends BasePattern {
             // Do not autofocus in iframes.
             return;
         }
+
+        // Re-focus after relevant DOM changes.
+        $(document).on("pat-update", (e, data) => {
+            const updated = data?.dom;
+            if (updated?.contains(this.el)) {
+                // Only focus if the updated element is a parent of this autofocus element.
+                this.set_focus();
+            }
+        });
+
         this.set_focus();
     }
 

src/pat/autofocus/autofocus.test.js

@@ -1,3 +1,4 @@
+import $ from "jquery";
 import "./autofocus";
 import registry from "../../core/registry";
 import utils from "../../core/utils";
@@ -44,4 +45,88 @@ describe("pat-autofocus", function () {
         const should_be_active = document.querySelector("input[name=i3]");
         expect(document.activeElement).toBe(should_be_active);
     });
+
+    describe("pat-update and pat-inject support", function () {
+        it("4.1 - Re-focus on pat-update.", async () => {
+            document.body.innerHTML = `
+                <div id="c1">
+                    <input name="i1" type="text" class="pat-autofocus"/>
+                </div>
+                <div id="c2">
+                    <input name="i2" type="text" class="pat-autofocus" hidden/>
+                </div>
+            `;
+            registry.scan(document.body);
+            await utils.timeout(1); // Wait for async pattern initialization.
+            await utils.timeout(100); // Wait for autofocus timeout.
+
+            expect(document.activeElement).toBe(
+                document.querySelector("input[name=i1]")
+            );
+
+            document.querySelector("input[name=i2]").removeAttribute("hidden");
+            $(document).trigger("pat-update", { dom: document.querySelector("#c2") });
+            await utils.timeout(100); // Wait for autofocus timeout.
+
+            expect(document.activeElement).toBe(
+                document.querySelector("input[name=i2]")
+            );
+        });
+
+        it("4.2 - Re-focus on pat-update / collapsible.", async () => {
+            await import("../collapsible/collapsible");
+
+            document.body.innerHTML = `
+                <input name="i1" type="text" class="pat-autofocus"/>
+                <div class="pat-collapsible closed"
+                     data-pat-collapsible="transition: none">
+                    <h4>Open collapsible.</h4>
+                    <input name="i2" class="pat-autofocus" />
+                </div>
+            `;
+            registry.scan(document.body);
+            await utils.timeout(1); // Wait for async pattern initialization.
+            await utils.timeout(100); // Wait for autofocus timeout.
+
+            expect(document.activeElement).toBe(
+                document.querySelector("input[name=i1]")
+            );
+
+            document.querySelector(".pat-collapsible h4").click();
+            await utils.timeout(100); // Wait for autofocus timeout.
+
+            expect(document.activeElement).toBe(
+                document.querySelector("input[name=i2]")
+            );
+        });
+
+        it("4.3 - Re-focus on pat-inject.", async () => {
+            await import("../inject/inject");
+
+            document.body.innerHTML = `
+                <input name="i1" type="text" class="pat-autofocus"/>
+                <a href="#autofocus-demo-input"
+                   class="pat-inject"
+                   data-pat-inject="target: self::after">inject</a>
+                <template id="autofocus-demo-input">
+                    <input name="i2" class="pat-autofocus" />
+                </template>
+            `;
+            registry.scan(document.body);
+            await utils.timeout(1); // Wait for async pattern initialization.
+            await utils.timeout(100); // Wait for autofocus timeout.
+
+            expect(document.activeElement).toBe(
+                document.querySelector("input[name=i1]")
+            );
+
+            document.querySelector("a.pat-inject").click();
+            await utils.timeout(2); // Wait for inject.
+            await utils.timeout(100); // Wait for autofocus timeout.
+
+            expect(document.activeElement).toBe(
+                document.querySelector("input[name=i2]")
+            );
+        });
+    });
 });

src/pat/autofocus/index.html

@@ -29,6 +29,19 @@
                  type="text"
           />
         </label>
+
+        <h3>Input 4 - should get focus when collapsible is opened.</h3>
+        <div class="pat-collapsible closed">
+            <h4>Open collapsible.</h4>
+
+            <input class="pat-autofocus" />
+        </div>
+
+        <h3>Input 5 - inject element with autofocus.</h3>
+        <a href="#autofocus-demo-input"
+           class="pat-inject"
+           data-pat-inject="target: self::after">inject autofocus input here</a>
+
       </fieldset>
     </form>
 
@@ -37,5 +50,9 @@
             src="./index-iframed.html"
             style="width: 400px; height: 300px; border: 1px solid black"
     ></iframe>
+
+    <template id="autofocus-demo-input">
+      <input class="pat-autofocus" />
+    </template>
   </body>
 </html>