From a2530f3e4cd57943c3109e3ef5be58278f1252bb Mon Sep 17 00:00:00 2001
From: Johannes Raggam <thetetet@gmail.com>
Date: Fri, 10 Nov 2023 00:06:16 +0100
Subject: [PATCH] fix(pat autosubmit): Re-add support for autosubmit on non
 form elements.

Fix a problem introduces in Patternslib 9.9.7 where pat-autosubmit did
not work when not defined on a form or input element.

As a side effect, the submit event is now always invoked on the related
or nearest form of the element where pat-autosubmit was defined on. If
that element is not a form element a related (input.form) or the nearest
parent form is searched and the submit event invoked upon.
---
 src/pat/auto-submit/auto-submit.js        |  7 +++--
 src/pat/auto-submit/auto-submit.test.js   | 37 +++++++++++++++--------
 src/pat/auto-suggest/auto-suggest.test.js | 15 +++++----
 3 files changed, 39 insertions(+), 20 deletions(-)

diff --git a/src/pat/auto-submit/auto-submit.js b/src/pat/auto-submit/auto-submit.js
index 0f968031c..29a4838c3 100644
--- a/src/pat/auto-submit/auto-submit.js
+++ b/src/pat/auto-submit/auto-submit.js
@@ -1,6 +1,7 @@
 import "../../core/jquery-ext";
 import $ from "jquery";
 import Base from "../../core/base";
+import dom from "../../core/dom";
 import events from "../../core/events";
 import input_change_events from "../../lib/input-change-events";
 import logging from "../../core/logging";
@@ -46,7 +47,7 @@ export default Base.extend({
                 data?.pattern === "sortable"
             ) {
                 // Directly submit when removing a clone or changing the sorting.
-                this.el.dispatchEvent(events.submit_event());
+                dom.find_form(this.el).dispatchEvent(events.submit_event());
                 log.debug(
                     `triggered by pat-update, pattern: ${data.pattern}, action: ${data.action}`
                 );
@@ -128,7 +129,9 @@ export default Base.extend({
 
     onInputChange(e) {
         e.stopPropagation();
-        this.el.dispatchEvent(events.submit_event({ submitter: e.target }));
+        dom.find_form(this.el).dispatchEvent(
+            events.submit_event({ submitter: e.target })
+        );
         log.debug(
             `submit event triggered by event ${e.type} by submitter (1) on (2)`,
             e.target,
diff --git a/src/pat/auto-submit/auto-submit.test.js b/src/pat/auto-submit/auto-submit.test.js
index f5f1e0828..63cfe3b63 100644
--- a/src/pat/auto-submit/auto-submit.test.js
+++ b/src/pat/auto-submit/auto-submit.test.js
@@ -82,17 +82,12 @@ describe("pat-autosubmit", function () {
             `;
             const input = document.querySelector(".pat-autosubmit");
             new Pattern(input);
-            let submit_input_dispatched = false;
             let submit_form_dispatched = false;
-            input.addEventListener("submit", () => {
-                submit_input_dispatched = true;
-            });
             document.querySelector("form").addEventListener("submit", () => {
                 submit_form_dispatched = true;
             });
             input.dispatchEvent(events.input_event());
             await utils.timeout(1);
-            expect(submit_input_dispatched).toBe(true);
             expect(submit_form_dispatched).toBe(true);
         });
 
@@ -179,23 +174,41 @@ describe("pat-autosubmit", function () {
             `;
             const input = document.querySelector(".pat-autosubmit");
             new Pattern(input);
-            let submit_input_dispatched = false;
             let submit_form_dispatched = false;
-            input.addEventListener("submit", () => {
-                submit_input_dispatched = true;
-            });
             document.querySelector("form").addEventListener("submit", () => {
                 submit_form_dispatched = true;
             });
             input.dispatchEvent(events.input_event());
             await utils.timeout(1);
-            expect(submit_input_dispatched).toBe(false);
             expect(submit_form_dispatched).toBe(false);
             await utils.timeout(9);
-            expect(submit_input_dispatched).toBe(false);
             expect(submit_form_dispatched).toBe(false);
             await utils.timeout(10);
-            expect(submit_input_dispatched).toBe(true);
+            expect(submit_form_dispatched).toBe(true);
+        });
+
+        it("2.6 - when pat-autosubmit is defined not on aform element", async function () {
+            document.body.innerHTML = `
+              <form>
+                <div
+                    class="pat-autosubmit"
+                    data-pat-autosubmit="delay: 0"
+                >
+                    <input name="q">
+                </div>
+              </form>
+            `;
+            const input = document.querySelector("input");
+            const autosubmit = document.querySelector(".pat-autosubmit");
+            new Pattern(autosubmit);
+
+            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_form_dispatched).toBe(true);
         });
     });
diff --git a/src/pat/auto-suggest/auto-suggest.test.js b/src/pat/auto-suggest/auto-suggest.test.js
index 84678fe9e..e0daebae5 100644
--- a/src/pat/auto-suggest/auto-suggest.test.js
+++ b/src/pat/auto-suggest/auto-suggest.test.js
@@ -428,17 +428,20 @@ describe("pat-autosuggest", function () {
     describe("4 - Integration...", function () {
         it("4.1 - Works with pat-auto-submit", async function () {
             document.body.innerHTML = `
-                <input
-                    type="text"
-                    class="pat-autosuggest pat-autosubmit"
-                    data-pat-autosuggest="words: apple, orange, pear"
-                    data-pat-autosubmit="delay:0" />
+                <form>
+                    <input
+                        type="text"
+                        class="pat-autosuggest pat-autosubmit"
+                        data-pat-autosuggest="words: apple, orange, pear"
+                        data-pat-autosubmit="delay:0" />
+                </form>
             `;
 
             const pattern_autosubmit = (await import("../auto-submit/auto-submit")).default; // prettier-ignore
             const input = document.querySelector("input");
+
             let submit_dispatched = false;
-            input.addEventListener("submit", () => {
+            document.querySelector("form").addEventListener("submit", () => {
                 submit_dispatched = true;
             });