From 9797916db8a633e5b670ebe9921855b2ce54c454 Mon Sep 17 00:00:00 2001
From: Johannes Raggam <thetetet@gmail.com>
Date: Thu, 27 Apr 2023 17:36:22 +0200
Subject: [PATCH 1/7] maint(core dom): Simplify is_input method.

---
 src/core/dom.js | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/core/dom.js b/src/core/dom.js
index f61c0f617..c0c901bd9 100644
--- a/src/core/dom.js
+++ b/src/core/dom.js
@@ -102,16 +102,11 @@ const is_visible = (el) => {
 /**
  * Test, if a element is a input-type element.
  *
- * This is taken from Sizzle/jQuery at:
- * https://github.com/jquery/sizzle/blob/f2a2412e5e8a5d9edf168ae3b6633ac8e6bd9f2e/src/sizzle.js#L139
- * https://github.com/jquery/sizzle/blob/f2a2412e5e8a5d9edf168ae3b6633ac8e6bd9f2e/src/sizzle.js#L1773
- *
  * @param {Node} el - The DOM node to test.
  * @returns {Boolean} - True if the element is a input-type element.
  */
 const is_input = (el) => {
-    const re_input = /^(?:input|select|textarea|button)$/i;
-    return re_input.test(el.nodeName);
+    return el.matches("button, input, select, textarea");
 };
 
 /**

From df89e023e3cfa78d5f5303ae4253dc044e3393ba Mon Sep 17 00:00:00 2001
From: Johannes Raggam <thetetet@gmail.com>
Date: Wed, 26 Apr 2023 23:25:32 +0200
Subject: [PATCH 2/7] maint(core registry): Simplify pattern scanning filter.

---
 src/core/registry.js | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/core/registry.js b/src/core/registry.js
index 03fd0430c..02a85af9f 100644
--- a/src/core/registry.js
+++ b/src/core/registry.js
@@ -180,17 +180,16 @@ const registry = {
         );
         matches = matches.filter((el) => {
             // Filter out patterns:
-            // - with class ``.disable-patterns``
-            // - wrapped in ``.disable-patterns`` elements
+            // - with class ``.disable-patterns`` or wrapped within.
             // - wrapped in ``<pre>`` elements
             // - wrapped in ``<template>`` elements
             return (
-                !el.matches(".disable-patterns") &&
-                !el?.parentNode?.closest?.(".disable-patterns") &&
+                !el?.closest?.(".disable-patterns") &&
                 !el?.parentNode?.closest?.("pre") &&
-                !el?.parentNode?.closest?.("template") && // NOTE: not strictly necessary. Template is a DocumentFragment and not reachable except for IE.
-                !el.matches(".cant-touch-this") && // BBB. TODO: Remove with next major version.
-                !el?.parentNode?.closest?.(".cant-touch-this") // BBB. TODO: Remove with next major version.
+                // BBB. TODO: Remove with next major version.
+                !el?.closest?.(".cant-touch-this")
+                // NOTE: templates are not reachabne anyways.
+                //!el?.parentNode?.closest?.("template")
             );
         });
 

From 5cca3b6f90338daa05f0440002b22f03b758d10e Mon Sep 17 00:00:00 2001
From: Johannes Raggam <thetetet@gmail.com>
Date: Wed, 26 Apr 2023 23:26:35 +0200
Subject: [PATCH 3/7] feat(core registry): Implement sort_early Pattern option.

When scanning a document for patterns, resort patterns and set those with a
sort_early property to the beginning of the initialization chain.

NOTE: Only use when necessary. It's not guaranteed that a pattern with
sort_early is set before another pattern with sort_early. Patterns which
are registered later will have a higher chance to be sorted before
others. Last come, first serve.
---
 src/core/registry.js | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/core/registry.js b/src/core/registry.js
index 02a85af9f..cbd57d5ef 100644
--- a/src/core/registry.js
+++ b/src/core/registry.js
@@ -133,6 +133,16 @@ const registry = {
     },
 
     orderPatterns(patterns) {
+        // Resort patterns and set those with `sort_early` to the beginning.
+        // NOTE: Only use when necessary and it's not guaranteed that a pattern
+        // with `sort_early` is set to the beginning. Last come, first serve.
+        for (const name of [...patterns]) {
+            if (registry[name]?.sort_early) {
+                patterns.splice(patterns.indexOf(name), 1);
+                patterns.unshift(name);
+            }
+        }
+
         // Always add pat-validation as first pattern, so that it can prevent
         // other patterns from reacting to submit events if form validation
         // fails.
@@ -140,6 +150,7 @@ const registry = {
             patterns.splice(patterns.indexOf("validation"), 1);
             patterns.unshift("validation");
         }
+
         // Add clone-code to the very beginning - we want to copy the markup
         // before any other patterns changed the markup.
         if (patterns.includes("clone-code")) {

From 7e55d9d317a3851fbdaff2af27d9ce188caeacdb Mon Sep 17 00:00:00 2001
From: Johannes Raggam <thetetet@gmail.com>
Date: Wed, 26 Apr 2023 20:44:41 +0200
Subject: [PATCH 4/7] maint(lib input-change-events): Modernize code.

---
 src/lib/input-change-events.js | 65 +++++++++++++++++++---------------
 1 file changed, 37 insertions(+), 28 deletions(-)

diff --git a/src/lib/input-change-events.js b/src/lib/input-change-events.js
index 3048c4f18..3f932d476 100644
--- a/src/lib/input-change-events.js
+++ b/src/lib/input-change-events.js
@@ -1,25 +1,30 @@
 // helper functions to make all input elements
 import $ from "jquery";
+import dom from "../core/dom";
 import logging from "../core/logging";
-var namespace = "input-change-events";
+
+const namespace = "input-change-events";
 const log = logging.getLogger(namespace);
 
-var _ = {
-    setup: function ($el, pat) {
+const _ = {
+    setup($el, pat) {
         if (!pat) {
             log.error("The name of the calling pattern has to be set.");
             return;
         }
+
         // list of patterns that installed input-change-event handlers
-        var patterns = $el.data(namespace) || [];
+        const patterns = $el.data(namespace) || [];
         log.debug("setup handlers for " + pat);
 
+        const el = $el[0];
+
         if (!patterns.length) {
             log.debug("installing handlers");
-            _.setupInputHandlers($el);
+            this.setupInputHandlers(el);
 
-            $el.on("patterns-injected." + namespace, function (event) {
-                _.setupInputHandlers($(event.target));
+            $el.on("patterns-injected." + namespace, (event) => {
+                this.setupInputHandlers(event.target);
             });
         }
         if (patterns.indexOf(pat) === -1) {
@@ -28,33 +33,37 @@ var _ = {
         }
     },
 
-    setupInputHandlers: function ($el) {
-        if (!$el.is(":input")) {
+    setupInputHandlers(el) {
+        if (dom.is_input(el)) {
+            // The element itself is an input, se we simply register a
+            // handler fot it.
+            this.registerHandlersForElement(el);
+        } else {
             // We've been given an element that is not a form input. We
             // therefore assume that it's a container of form inputs and
             // register handlers for its children.
-            $el.findInclusive(":input").each(_.registerHandlersForElement);
-        } else {
-            // The element itself is an input, se we simply register a
-            // handler fot it.
-            _.registerHandlersForElement.bind($el)();
+            for (const _el of dom.querySelectorAllAndMe(
+                el,
+                "input, textarea, select, button"
+            )) {
+                this.registerHandlersForElement(_el);
+            }
         }
     },
 
-    registerHandlersForElement: function () {
-        var $el = $(this),
-            isNumber = $el.is("input[type=number]"),
-            isText = $el.is("input:text, input[type=search], textarea");
+    registerHandlersForElement(el) {
+        const $el = $(el);
+        const isNumber = el.matches("input[type=number]");
+        const isText = el.matches(
+            "input:not(type), input[type=text], input[type=search], textarea"
+        );
 
         if (isNumber) {
-            // for <input type="number" /> we want to trigger the change
-            // on keyup
-            if ("onkeyup" in window) {
-                $el.on("keyup." + namespace, function () {
-                    log.debug("translating keyup");
-                    $el.trigger("input-change");
-                });
-            }
+            // for number inputs we want to trigger the change on keyup
+            $el.on("keyup." + namespace, function () {
+                log.debug("translating keyup");
+                $el.trigger("input-change");
+            });
         }
         if (isText || isNumber) {
             $el.on("input." + namespace, function () {
@@ -73,8 +82,8 @@ var _ = {
         });
     },
 
-    remove: function ($el, pat) {
-        var patterns = $el.data(namespace) || [];
+    remove($el, pat) {
+        let patterns = $el.data(namespace) || [];
         if (patterns.indexOf(pat) === -1) {
             log.warn("input-change-events were never installed for " + pat);
         } else {

From 43d23a0cd24d7f0f2550fd832ec9bdf88806b2b1 Mon Sep 17 00:00:00 2001
From: Johannes Raggam <thetetet@gmail.com>
Date: Wed, 26 Apr 2023 23:17:00 +0200
Subject: [PATCH 5/7] fix(lib input-change-events): Support form elements
 outsde a form container.

Also support form elements which are outside of a form container.
This allows pat-autosubmit to also work with form inputs which are bound
to a form but not contained wiithin.
---
 src/lib/input-change-events.js          | 26 +++++++++++++++++--------
 src/pat/auto-submit/auto-submit.test.js |  4 +++-
 2 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/src/lib/input-change-events.js b/src/lib/input-change-events.js
index 3f932d476..b1c074973 100644
--- a/src/lib/input-change-events.js
+++ b/src/lib/input-change-events.js
@@ -42,17 +42,27 @@ const _ = {
             // We've been given an element that is not a form input. We
             // therefore assume that it's a container of form inputs and
             // register handlers for its children.
-            for (const _el of dom.querySelectorAllAndMe(
-                el,
-                "input, textarea, select, button"
-            )) {
+            for (const _el of el.closest("form").elements) {
+                // Search for all form elements, also those outside the form
+                // container.
+                if (!dom.is_input(_el)) {
+                    // form.elements also catches fieldsets, object, output,
+                    // which we do not want to handle here.
+                    continue;
+                }
                 this.registerHandlersForElement(_el);
             }
         }
     },
 
     registerHandlersForElement(el) {
+        let el_within_form = true;
+        if (el.closest("form") !== el.form) {
+            el_within_form = false;
+        }
+
         const $el = $(el);
+        const $form = $(el.form);
         const isNumber = el.matches("input[type=number]");
         const isText = el.matches(
             "input:not(type), input[type=text], input[type=search], textarea"
@@ -62,23 +72,23 @@ const _ = {
             // for number inputs we want to trigger the change on keyup
             $el.on("keyup." + namespace, function () {
                 log.debug("translating keyup");
-                $el.trigger("input-change");
+                (el_within_form ? $el : $form).trigger("input-change");
             });
         }
         if (isText || isNumber) {
             $el.on("input." + namespace, function () {
                 log.debug("translating input");
-                $el.trigger("input-change");
+                (el_within_form ? $el : $form).trigger("input-change");
             });
         } else {
             $el.on("change." + namespace, function () {
                 log.debug("translating change");
-                $el.trigger("input-change");
+                (el_within_form ? $el : $form).trigger("input-change");
             });
         }
 
         $el.on("blur", function () {
-            $el.trigger("input-defocus");
+            (el_within_form ? $el : $form).trigger("input-defocus");
         });
     },
 
diff --git a/src/pat/auto-submit/auto-submit.test.js b/src/pat/auto-submit/auto-submit.test.js
index c4fe59a85..03fc83152 100644
--- a/src/pat/auto-submit/auto-submit.test.js
+++ b/src/pat/auto-submit/auto-submit.test.js
@@ -62,7 +62,9 @@ describe("pat-autosubmit", function () {
             `;
             const el = document.querySelector(".pat-autosubmit");
             const instance = new Pattern(el);
-            const spy = jest.spyOn(instance, "refreshListeners");
+            const spy = jest
+                .spyOn(instance, "refreshListeners")
+                .mockImplementation(() => {});
             $(el).trigger("pat-update", { pattern: "clone" });
             expect(spy).toHaveBeenCalled();
         });

From b129af81747d64456b1e7b2d256b4820ec00f7f2 Mon Sep 17 00:00:00 2001
From: Johannes Raggam <thetetet@gmail.com>
Date: Thu, 27 Apr 2023 18:20:09 +0200
Subject: [PATCH 6/7] fix(pat validation): Support form elements outsde a form
 container.

Also support form elements belonging to the form but which are outside
of a form container to be validated.
---
 src/pat/validation/validation.js      | 12 ++---
 src/pat/validation/validation.test.js | 76 +++++++++++++++++++++++++++
 2 files changed, 82 insertions(+), 6 deletions(-)

diff --git a/src/pat/validation/validation.js b/src/pat/validation/validation.js
index 2a2d152b2..d00cddfdd 100644
--- a/src/pat/validation/validation.js
+++ b/src/pat/validation/validation.js
@@ -71,12 +71,12 @@ class Pattern extends BasePattern {
     }
 
     initialize_inputs() {
-        this.inputs = [
-            ...this.el.querySelectorAll("input[name], select[name], textarea[name]"),
-        ];
-        this.disabled_elements = [
-            ...this.el.querySelectorAll(this.options.disableSelector),
-        ];
+        this.inputs = [...this.el.elements].filter((el) =>
+            el.matches("input[name], select[name], textarea[name]")
+        );
+        this.disabled_elements = [...this.el.elements].filter((el) =>
+            el.matches(this.options.disableSelector)
+        );
 
         for (const [cnt, input] of this.inputs.entries()) {
             // Cancelable debouncer.
diff --git a/src/pat/validation/validation.test.js b/src/pat/validation/validation.test.js
index 56471f449..a9fa1decc 100644
--- a/src/pat/validation/validation.test.js
+++ b/src/pat/validation/validation.test.js
@@ -1455,4 +1455,80 @@ describe("pat-validation", function () {
         expect(el.querySelectorAll("em.warning").length).toBe(0);
         expect(el.querySelector("#form-buttons-create").disabled).toBe(false);
     });
+
+    it("8.1 - input ouside form: validates inputs part of the form but outside the form container", async function () {
+        document.body.innerHTML = `
+          <form id="form-el" class="pat-validation">
+          </form>
+          <input name="name" form="form-el" required>
+        `;
+        const el = document.querySelector(".pat-validation");
+        const inp = document.querySelector("[name=name]");
+
+        const instance = new Pattern(el);
+        await events.await_pattern_init(instance);
+
+        inp.value = "";
+        inp.dispatchEvent(events.change_event());
+        await utils.timeout(1); // wait a tick for async to settle.
+
+        expect(document.querySelectorAll("em.warning").length).toBe(1);
+    });
+
+    it("8.2 - input outside form: removes the error when the field becomes valid.", async function () {
+        document.body.innerHTML = `
+          <form id="form-el" class="pat-validation">
+          </form>
+          <input name="name" form="form-el" required>
+        `;
+        const el = document.querySelector(".pat-validation");
+        const inp = document.querySelector("[name=name]");
+
+        const instance = new Pattern(el);
+        await events.await_pattern_init(instance);
+
+        inp.value = "";
+        inp.dispatchEvent(events.change_event());
+        await utils.timeout(1); // wait a tick for async to settle.
+
+        expect(document.querySelectorAll("em.warning").length).toBe(1);
+
+        inp.value = "abc";
+        inp.dispatchEvent(events.change_event());
+        await utils.timeout(1); // wait a tick for async to settle.
+
+        expect(document.querySelectorAll("em.warning").length).toBe(0);
+    });
+
+    it("8.3 - input outside form: can disable certain form elements when validation fails", async function () {
+        // Tests the disable-selector argument
+        document.body.innerHTML = `
+          <form id="form-el" class="pat-validation"
+                data-pat-validation="
+                    disable-selector: button;
+                ">
+          </form>
+          <input form="form-el" name="input" required>
+          <button form="form-el">Submit</button>
+        `;
+
+        const el = document.querySelector(".pat-validation");
+        const inp = document.querySelector("[name=input]");
+        const but = document.querySelector("button");
+
+        const instance = new Pattern(el);
+        await events.await_pattern_init(instance);
+
+        inp.value = "";
+        inp.dispatchEvent(events.change_event());
+        await utils.timeout(1); // wait a tick for async to settle.
+        expect(document.querySelectorAll("em.warning").length).toBe(1);
+        expect(but.disabled).toBe(true);
+
+        inp.value = "ok";
+        inp.dispatchEvent(events.change_event());
+        await utils.timeout(1); // wait a tick for async to settle.
+        expect(document.querySelectorAll("em.warning").length).toBe(0);
+        expect(but.disabled).toBe(false);
+    });
 });

From 365f0489bbd23a808cf9f6a23f426a20351a3852 Mon Sep 17 00:00:00 2001
From: Johannes Raggam <thetetet@gmail.com>
Date: Fri, 28 Apr 2023 00:03:13 +0200
Subject: [PATCH 7/7] forward, resolving problems, not done.

---
 src/lib/input-change-events.js          | 44 ++++++-------
 src/pat/auto-submit/auto-submit.js      |  1 +
 src/pat/auto-submit/auto-submit.test.js | 83 +++++++++++++++++++++++--
 3 files changed, 103 insertions(+), 25 deletions(-)

diff --git a/src/lib/input-change-events.js b/src/lib/input-change-events.js
index b1c074973..5bd38fb1f 100644
--- a/src/lib/input-change-events.js
+++ b/src/lib/input-change-events.js
@@ -37,12 +37,16 @@ const _ = {
         if (dom.is_input(el)) {
             // The element itself is an input, se we simply register a
             // handler fot it.
-            this.registerHandlersForElement(el);
+            console.log("1");
+            this.registerHandlersForElement({ trigger_source: el, trigger_target: el });
         } else {
             // We've been given an element that is not a form input. We
             // therefore assume that it's a container of form inputs and
             // register handlers for its children.
-            for (const _el of el.closest("form").elements) {
+            console.log("2");
+            const form = el.closest("form");
+            for (const _el of form.elements) {
+                console.log("3", _el);
                 // Search for all form elements, also those outside the form
                 // container.
                 if (!dom.is_input(_el)) {
@@ -50,45 +54,43 @@ const _ = {
                     // which we do not want to handle here.
                     continue;
                 }
-                this.registerHandlersForElement(_el);
+                this.registerHandlersForElement({
+                    trigger_source: _el,
+                    trigger_target: form,
+                });
             }
         }
     },
 
-    registerHandlersForElement(el) {
-        let el_within_form = true;
-        if (el.closest("form") !== el.form) {
-            el_within_form = false;
-        }
-
-        const $el = $(el);
-        const $form = $(el.form);
-        const isNumber = el.matches("input[type=number]");
-        const isText = el.matches(
+    registerHandlersForElement({ trigger_source, trigger_target }) {
+        const $trigger_source = $(trigger_source);
+        const $trigger_target = $(trigger_target);
+        const isNumber = trigger_source.matches("input[type=number]");
+        const isText = trigger_source.matches(
             "input:not(type), input[type=text], input[type=search], textarea"
         );
 
         if (isNumber) {
             // for number inputs we want to trigger the change on keyup
-            $el.on("keyup." + namespace, function () {
+            $trigger_source.on("keyup." + namespace, function () {
                 log.debug("translating keyup");
-                (el_within_form ? $el : $form).trigger("input-change");
+                $trigger_target.trigger("input-change");
             });
         }
         if (isText || isNumber) {
-            $el.on("input." + namespace, function () {
+            $trigger_source.on("input." + namespace, function () {
                 log.debug("translating input");
-                (el_within_form ? $el : $form).trigger("input-change");
+                $trigger_target.trigger("input-change");
             });
         } else {
-            $el.on("change." + namespace, function () {
+            $trigger_source.on("change." + namespace, function () {
                 log.debug("translating change");
-                (el_within_form ? $el : $form).trigger("input-change");
+                $trigger_target.trigger("input-change");
             });
         }
 
-        $el.on("blur", function () {
-            (el_within_form ? $el : $form).trigger("input-defocus");
+        $trigger_source.on("blur", function () {
+            $trigger_target.trigger("input-defocus");
         });
     },
 
diff --git a/src/pat/auto-submit/auto-submit.js b/src/pat/auto-submit/auto-submit.js
index 6786ef050..1e129670c 100644
--- a/src/pat/auto-submit/auto-submit.js
+++ b/src/pat/auto-submit/auto-submit.js
@@ -118,6 +118,7 @@ export default Base.extend({
     },
 
     onInputChange(e) {
+        console.log("onInputChange", e);
         e.stopPropagation();
         this.$el.submit();
         log.debug("triggered by " + e.type);
diff --git a/src/pat/auto-submit/auto-submit.test.js b/src/pat/auto-submit/auto-submit.test.js
index 03fc83152..853aa8265 100644
--- a/src/pat/auto-submit/auto-submit.test.js
+++ b/src/pat/auto-submit/auto-submit.test.js
@@ -71,7 +71,7 @@ describe("pat-autosubmit", function () {
     });
 
     describe("2 - Trigger a submit", function () {
-        it("when a change on a single input happens", async function () {
+        it("2.1 - when a change on a single input happens", async function () {
             document.body.innerHTML = `
               <form>
                 <input
@@ -118,7 +118,7 @@ describe("pat-autosubmit", function () {
             expect(spy).toHaveBeenCalled();
         });
 
-        it("when pat-clone removes an element", function () {
+        it("2.3 - when pat-clone removes an element", function () {
             document.body.innerHTML = `
               <form class="pat-autosubmit">
               </form>
@@ -130,7 +130,7 @@ describe("pat-autosubmit", function () {
             expect(spy).toHaveBeenCalled();
         });
 
-        it("when pat-sortable changes the sorting", function () {
+        it("2.4 - when pat-sortable changes the sorting", function () {
             document.body.innerHTML = `
               <form class="pat-autosubmit">
               </form>
@@ -141,9 +141,84 @@ describe("pat-autosubmit", function () {
             $(el).trigger("pat-update", { pattern: "sortable" });
             expect(spy).toHaveBeenCalled();
         });
+
+        it("2.5 - input outside form: change on input 1", async function () {
+            document.body.innerHTML = `
+              <form id="form-el">
+              </form>
+              <input
+                  form="form-el"
+                  class="pat-autosubmit"
+                  name="name"
+                  data-pat-autosubmit="delay: 0"
+              />
+            `;
+            const input = document.querySelector("[name=name]");
+            const form = document.querySelector("form");
+
+            let submit_input = false;
+            let submit_form = false;
+            input.addEventListener("submit", () => {
+                submit_input = true;
+                // NOTE: In a real browser a submit on an input outside a form
+                // would submit the form too. In jsdom this is not the case, so
+                // we need to trigger it manually. This is making this test a
+                // bit useless.
+                form.dispatchEvent(events.submit_event());
+            });
+            form.addEventListener("submit", () => {
+                submit_form = true;
+            });
+
+            const instance = new Pattern(input);
+            await events.await_pattern_init(instance);
+
+            jest.spyOn(instance.$el, "submit").mockImplementation(() => {
+                input.dispatchEvent(events.submit_event());
+            });
+
+            input.dispatchEvent(events.input_event());
+
+            expect(submit_input).toBe(true);
+            expect(submit_form).toBe(true);
+        });
+
+        it("2.6 - input outside form: change on input 2", async function () {
+            document.body.innerHTML = `
+              <form id="form-el" class="pat-auto-submit"
+                  data-pat-autosubmit="delay: 0"
+              >
+              </form>
+              <input
+                  form="form-el"
+                  name="name"
+              />
+            `;
+            const input = document.querySelector("[name=name]");
+            const form = document.querySelector("form");
+
+            let submit_input = false;
+            let submit_form = false;
+            input.addEventListener("submit", () => (submit_input = true));
+            form.addEventListener("submit", () => (submit_form = true));
+
+            const instance = new Pattern(form);
+            await events.await_pattern_init(instance);
+
+            jest.spyOn(instance.$el, "submit").mockImplementation(() => {
+                input.dispatchEvent(events.submit_event());
+            });
+
+            input.dispatchEvent(events.input_event());
+
+            expect(submit_input).toBe(true);
+            expect(submit_form).toBe(true);
+        });
     });
 
-    describe("3 - Parsing of the delay option", function () {
+    describe("3 - Input outside form: Trigger a submit", function () {});
+
+    describe("4 - Parsing of the delay option", function () {
         it("can be done in shorthand notation", function () {
             let pat = new Pattern(`<input data-pat-autosubmit="500ms"/>`);
             expect(pat.options.delay).toBe(500);