Merge pull request #1193 from Patternslib/fix-pat-subform

Fix pat subform

src/core/dom.js

@@ -569,11 +569,12 @@ const element_uuid = (el) => {
 const find_form = (el) => {
     // Prefer input.form which allows for input outside form elements and fall
     // back to search for a parent form.
-    return (
+    const form =
+        el.closest(".pat-subform") || // Special Patternslib subform concept has precedence.
         el.form ||
         el.querySelector("input, select, textarea, button")?.form ||
-        el.closest("form")
-    );
+        el.closest("form");
+    return form;
 };
 
 const dom = {

src/core/dom.test.js

@@ -1002,4 +1002,18 @@ describe("find_form", function () {
         const form = document.querySelector("#the-form");
         expect(dom.find_form(el)).toBe(form);
     });
+
+    it("example 9 - subform support", function () {
+        // Subform support. Subforms have precedence over forms.
+        document.body.innerHTML = `
+            <form>
+                <div class="pat-subform">
+                    <button></button>
+                </div>
+            </form>
+        `;
+        const el = document.querySelector("button");
+        const subform = document.querySelector(".pat-subform");
+        expect(dom.find_form(el)).toBe(subform);
+    });
 });

src/pat/auto-submit/auto-submit.test.js

@@ -187,7 +187,7 @@ describe("pat-autosubmit", function () {
             expect(submit_form_dispatched).toBe(true);
         });
 
-        it("2.6 - when pat-autosubmit is defined not on aform element", async function () {
+        it("2.6 - when pat-autosubmit is defined not on a form element", async function () {
             document.body.innerHTML = `
               <form>
                 <div
@@ -211,6 +211,40 @@ describe("pat-autosubmit", function () {
             await utils.timeout(1);
             expect(submit_form_dispatched).toBe(true);
         });
+
+        it("2.7 - directly on a pat-subform", async function () {
+            document.body.innerHTML = `
+              <form>
+                <div class="pat-subform">
+                    <input
+                        class="pat-autosubmit"
+                        data-pat-autosubmit="delay: 0"
+                        name="q">
+                </div>
+              </form>
+            `;
+            const input = document.querySelector("input");
+            const subform = document.querySelector(".pat-subform");
+            const autosubmit = document.querySelector(".pat-autosubmit");
+            new Pattern(autosubmit);
+
+            // The submit event should be invoked on the subform.
+            let submit_subform_dispatched = false;
+            subform.addEventListener("submit", () => {
+                submit_subform_dispatched = true;
+            });
+
+            // The submit event should also bubble up to the form.
+            let submit_form_dispatched = false;
+            document.querySelector("form").addEventListener("submit", () => {
+                submit_form_dispatched = true;
+            });
+
+            input.dispatchEvent(events.input_event());
+            await utils.timeout(1);
+            expect(submit_subform_dispatched).toBe(true);
+            expect(submit_form_dispatched).toBe(true);
+        });
     });
 
     describe("3 - Parsing of the delay option", function () {

src/pat/subform/subform.js

@@ -28,18 +28,18 @@ export default Base.extend({
     },
 
     destroy($el) {
-        $el.off("submit");
+        events.remove_event_listener($el[0], "pat-subform--submit");
     },
 
     scopedSubmit($el) {
-        var $form = $el.parents("form"),
-            $exclude = $form.find(":input").filter(function () {
-                return !$(this).is($el.find("*"));
-            });
+        const $form = $el.parents("form");
+        const $exclude = $form.find(":input").filter(function () {
+            return !$(this).is($el.find("*"));
+        });
         // make other controls "unsuccessful"
         log.debug("Hiding unwanted elements from submission.");
-        var names = $exclude.map(function () {
-            var name = $(this).attr("name");
+        const names = $exclude.map(function () {
+            const name = $(this).attr("name");
             return name ? name : 0;
         });
         $exclude.each(function () {
@@ -63,8 +63,8 @@ export default Base.extend({
 
     submit(ev) {
         ev.stopPropagation();
-        var $this = $(ev.target),
-            $button = $this.find("button[type=submit][formaction]").first();
+        const $this = $(ev.target);
+        const $button = $this.find("button[type=submit][formaction]").first();
         if ($button.length) {
             $button.trigger("click");
         } else {
@@ -78,7 +78,7 @@ export default Base.extend({
         if (ev.keyCode != 13) {
             return;
         }
-        var $subform = $(ev.target).parents(".pat-subform");
+        const $subform = $(ev.target).parents(".pat-subform");
         if (!$subform.is(".pat-autosubmit")) {
             return;
         }
@@ -90,14 +90,14 @@ export default Base.extend({
         ev.stopPropagation();
         ajax.onClickSubmit(ev); // make sure the submitting button is sent with the form
 
-        var $button = $(ev.target),
-            $sub = $button.parents(".pat-subform").first(),
-            formaction = $button.attr("formaction");
+        const $button = $(ev.target);
+        const $sub = $button.parents(".pat-subform").first();
+        const formaction = $button.attr("formaction");
 
         if (formaction) {
             // override the default action and restore afterwards
             if ($sub.is(".pat-inject")) {
-                var previousValue = $sub.data("pat-inject");
+                const previousValue = $sub.data("pat-inject");
                 $sub.data("pat-inject", inject.extractConfig($sub, { url: formaction }));
                 this.scopedSubmit($sub);
                 $sub.data("pat-inject", previousValue);