fix(pat modal): Fix close-panel with multiple inject forms.

thet · thet · commit 251675ba786c · 2021-11-25T01:04:43.000+01:00
Support close-panel with multiple forms.pat-inject in a modal, for example together with pat-stacks.
Previously only the first form used to attach the event handler which listens for the injection success event for closing the modal.
In these cases the modal wasn't closed properly.
diff --git a/src/pat/modal/modal.js b/src/pat/modal/modal.js
@@ -101,9 +101,11 @@ export default Base.extend({
         if (document.activeElement) {
             document.activeElement.focus();
         }
+
         this._init_handlers();
         this.resize();
         this.setPosition();
+
         $("body").addClass("modal-active");
         this.el.dispatchEvent(
             new Event("pat-modal-ready", { bubbles: true, cancelable: true })
@@ -225,9 +227,10 @@ export default Base.extend({
         $("body").removeClass("modal-panel");
     },
 
-    destroy_inject() {
-        const form = this.el.querySelector("form.pat-inject");
-        if (form) {
+    destroy_inject(e) {
+        const button = e.target;
+        const form = button.form;
+        if (form && form.classList.contains("pat-inject")) {
             // if the modal contains a for mwith pat-inject, wait for injection
             // to be finished and then destroy the modal.
             const destroy_handler = () => {
@@ -241,8 +244,7 @@ export default Base.extend({
                 destroy_handler.bind(this)
             );
         } else {
-            // if working without injection, destroy after waiting a tick to let
-            // eventually registered on-submit handlers kick in first.
+            // if working without form injection, just destroy.
             this.destroy();
         }
     },
diff --git a/src/pat/modal/modal.test.js b/src/pat/modal/modal.test.js
@@ -206,6 +206,44 @@ describe("pat-modal", function () {
             expect(document.querySelector("#target2").textContent).toBe("there");
         });
 
+        it("Submit form, do injection and close overlay with multiple forms.", async function () {
+            await import("../inject/inject");
+            const registry = (await import("../../core/registry")).default;
+
+            jest.spyOn($, "ajax").mockImplementation(() => deferred);
+            answer(
+                `<html><body><div id="source">hello.</div><div id="source2">there</div></body></html>`
+            );
+
+            document.body.innerHTML = `
+              <div class="pat-modal">
+                <form
+                    class="form1 pat-inject"
+                    action="test.html"
+                    data-pat-inject="source: #source; target: #target">
+                  <button type="submit" class="close-panel">submit</button>
+                </form>
+                <form
+                    class="form2 pat-inject"
+                    action="test.html"
+                    data-pat-inject="source: #source; target: #target">
+                  <button type="submit" class="close-panel">submit</button>
+                </form>
+              </div>
+              <div id="target">
+              </div>
+            `;
+            registry.scan(document.body);
+            await utils.timeout(1); // wait a tick for async to settle.
+
+            document.querySelector(".form2 button.close-panel[type=submit]").click();
+            await utils.timeout(1); // wait a tick for pat-inject to settle.
+            await utils.timeout(1); // wait a tick for pat-modal destroy to settle.
+
+            expect(document.querySelector(".pat-modal")).toBe(null);
+            expect(document.querySelector("#target").textContent).toBe("hello.");
+        });
+
         it("Ensure destroy callback isn't called multiple times.", async function () {
             document.body.innerHTML = `
               <div id="pat-modal" class="pat-modal">
