From a0fa4d2743ef0d96c2c58ebf2d6d14bd37188859 Mon Sep 17 00:00:00 2001
From: Johannes Raggam <thetetet@gmail.com>
Date: Sat, 19 Aug 2023 15:57:02 +0200
Subject: [PATCH] fix(pat-inject): Don't submit forms with invalid data.

Fix a problem with pat-inject and pat-validation where forms with
invalid data could be submitted and the submit button wasn't inactive.
The problem was fixed in two ways:

- pat-inject now has a check for browser-native form validation. Invalid
  forms would not be submitted.

- pat-inject now waits a tick before it get's initialized. Modern
  BasePattern based patterns including pat-validation are all deferred
  for 1 tick by design. pat-inject, being and older Pattern isn't
  deferred and thus initialized before pat-inject. It's initialized
  before pat-validation even though we have some Pattern initialization
  reorganization code in place - pat-inject not being deferred will have
  it's event handlers always run before any others. But now, with the
  1-tick defer in place, pat-inject's event handlers are run in the
  correct order - after pat-validation form validation which in case of
  an invalid form would also deactivate the submit button.
---
 src/pat/inject/inject.js              | 101 ++++++++------
 src/pat/inject/inject.test.js         | 191 ++++++++++++++++++++------
 src/pat/modal/modal.js                |   8 +-
 src/pat/modal/modal.test.js           |  33 ++---
 src/pat/navigation/navigation.test.js |   1 +
 src/pat/sortable/sortable.test.js     |   1 +
 6 files changed, 230 insertions(+), 105 deletions(-)

diff --git a/src/pat/inject/inject.js b/src/pat/inject/inject.js
index f8b4a8c2d..38d6e46aa 100644
--- a/src/pat/inject/inject.js
+++ b/src/pat/inject/inject.js
@@ -1,4 +1,5 @@
 import "../../core/jquery-ext"; // for findInclusive
+import "../../core/polyfills"; // SubmitEvent.submitter for Safari < 15.4 and jsDOM
 import $ from "jquery";
 import ajax from "../ajax/ajax";
 import dom from "../../core/dom";
@@ -47,7 +48,14 @@ const inject = {
     trigger: "a.pat-inject, form.pat-inject, .pat-subform.pat-inject",
     parser: parser,
 
-    init($el, opts) {
+    async init($el, opts) {
+        // We need to wait a tick. Modern BasePattern based patterns like
+        // pat-validation do always wait a tick before initializing. The
+        // patterns registry always initializes pat-validation first but since
+        // it is waiting a tick the event handlers are registerd after the ones
+        // from pat-inject. Waiting a tick in pat-inject solves this -
+        // pat-validation's event handlers are initialized first.
+        await utils.timeout(1);
         const cfgs = this.extractConfig($el, opts);
         if (cfgs.some((e) => e.history === "record") && !("pushState" in history)) {
             // if the injection shall add a history entry and HTML5 pushState
@@ -95,21 +103,29 @@ const inject = {
                         }
                     });
                     // setup event handlers
-                    if ($el.is("form")) {
-                        $el.on("submit.pat-inject", this.onTrigger.bind(this))
-                            .on(
-                                "click.pat-inject",
-                                `[type=submit]:not([formaction]),
-                                 button:not([formaction]):not([type=button])`,
-                                ajax.onClickSubmit
-                            )
-                            .on(
-                                "click.pat-inject",
-                                `[type=submit][formaction],
-                                 [type=image][formaction],
-                                 button[formaction]:not([type=button])`,
-                                this.onFormActionSubmit.bind(this)
+                    if ($el[0]?.tagName === "FORM") {
+                        events.add_event_listener(
+                            $el[0],
+                            "submit",
+                            "pat-inject--form-submit",
+                            (e) => {
+                                this.onTrigger(e);
+                            }
+                        );
+                        for (const button of $el[0].querySelectorAll(
+                            "[type=submit], button:not([type=button]), [type=image]"
+                        )) {
+                            events.add_event_listener(
+                                button,
+                                "click",
+                                "pat-inject--form-submit-click",
+                                (e) => {
+                                    // make sure the submitting button is sent
+                                    // with the form
+                                    ajax.onClickSubmit(e);
+                                }
                             );
+                        }
                     } else if ($el.is(".pat-subform")) {
                         log.debug("Initializing subform with injection");
                     } else {
@@ -165,37 +181,40 @@ const inject = {
         /* Injection has been triggered, either via form submission or a
          * link has been clicked.
          */
-        const $el = $(e.currentTarget);
-        const cfgs = $el.data("pat-inject");
-        if ($el.is("form")) {
-            $(cfgs).each((i, v) => {
-                v.params = $.param($el.serializeArray());
-            });
-        }
+
+        // Prevent the original event from doing it's work.
+        // We want an AJAX request instead.
         e.preventDefault && e.preventDefault();
-        $el.trigger("patterns-inject-triggered");
-        this.execute(cfgs, $el);
-    },
 
-    onFormActionSubmit(e) {
-        ajax.onClickSubmit(e); // make sure the submitting button is sent with the form
+        const $el = $(e.currentTarget);
+        let cfgs = $el.data("pat-inject");
+        if ($el[0].tagName === "FORM" && e.type === "submit") {
+            if ($el[0].matches(":invalid")) {
+                // Do not submit invalid forms.
+                // Works with native form validation and with pat-validation.
+                log.debug("Form is invalid, aborting");
+                return;
+            }
 
-        const $button = $(e.target);
-        const formaction = $button.attr("formaction");
-        const $form = $button.parents(".pat-inject").first();
-        const opts = {
-            url: formaction,
-        };
-        const $cfg_node = $button.closest("[data-pat-inject]");
-        const cfgs = this.extractConfig($cfg_node, opts);
+            const submitter = e.submitter;
+            const formaction = submitter?.getAttribute("formaction");
+            if (formaction) {
+                const opts = {
+                    url: formaction,
+                };
 
-        $(cfgs).each((i, v) => {
-            v.params = $.param($form.serializeArray());
-        });
+                // Support custom data-pat-inject on formaction buttons.
+                const cfg_node = submitter.closest("[data-pat-inject]");
+                cfgs = this.extractConfig($(cfg_node), opts);
+            }
 
-        e.preventDefault();
-        $form.trigger("patterns-inject-triggered");
-        this.execute(cfgs, $form);
+            for (const cfg of cfgs) {
+                cfg.params = $.param($el.serializeArray());
+            }
+        }
+
+        $el.trigger("patterns-inject-triggered");
+        this.execute(cfgs, $el);
     },
 
     submitSubform($sub) {
diff --git a/src/pat/inject/inject.test.js b/src/pat/inject/inject.test.js
index 530e0ad13..7b19bb304 100644
--- a/src/pat/inject/inject.test.js
+++ b/src/pat/inject/inject.test.js
@@ -1,5 +1,6 @@
 import pattern from "./inject";
 import $ from "jquery";
+import events from "../../core/events";
 import registry from "../../core/registry";
 import utils from "../../core/utils";
 import { jest } from "@jest/globals";
@@ -62,6 +63,8 @@ describe("pat-inject", function () {
             $(document).on("patterns-injected", callback);
 
             pattern.init($a);
+            await utils.timeout(1); // wait a tick for async to settle.
+
             $a.trigger("click");
 
             var cfgs = pattern.extractConfig($a, {});
@@ -86,6 +89,8 @@ describe("pat-inject", function () {
             $("#lab").empty().append($a).append($div);
 
             pattern.init($a);
+            await utils.timeout(1); // wait a tick for async to settle.
+
             $a.trigger("click");
 
             var cfgs = pattern.extractConfig($a, {});
@@ -100,14 +105,17 @@ describe("pat-inject", function () {
             spy_ajax.mockRestore();
         });
 
-        it("2.3 - can be set to an empty string value so that nothing gets added to the target while content is still loading'", function () {
+        it("2.3 - can be set to an empty string value so that nothing gets added to the target while content is still loading'", async function () {
             const spy_ajax = jest.spyOn($, "ajax");
             var $a = $(
                 '<a class="pat-inject" data-pat-inject="loading-class: ;" href="test.html#someid">link</a>'
             );
             var $div = $('<div id="someid" />');
             $("#lab").empty().append($a).append($div);
+
             pattern.init($a);
+            await utils.timeout(1); // wait a tick for async to settle.
+
             $a.trigger("click");
             var cfgs = pattern.extractConfig($a, {});
             expect(cfgs[0].loadingClass).toBe("");
@@ -118,7 +126,7 @@ describe("pat-inject", function () {
     });
 
     describe("3 - The confirm argument", function () {
-        it("3.1 - is by default set to 'class', which means it asks for confirmation based on a class on the target", function () {
+        it("3.1 - is by default set to 'class', which means it asks for confirmation based on a class on the target", async function () {
             var $a = $('<a class="pat-inject" href="test.html#someid">link</a>');
             var $div = $('<div id="someid" />');
             $("#lab").empty().append($a).append($div);
@@ -133,6 +141,8 @@ describe("pat-inject", function () {
 
             // Test that confirm doesn't get called
             pattern.init($a);
+            await utils.timeout(1); // wait a tick for async to settle.
+
             $a.trigger("click");
             expect(spy_confirm).not.toHaveBeenCalled();
 
@@ -144,7 +154,7 @@ describe("pat-inject", function () {
             spy_confirm.mockRestore();
         });
 
-        it("3.2 - can be set to 'never' to never ask for confirmation", function () {
+        it("3.2 - can be set to 'never' to never ask for confirmation", async function () {
             var $a = $(
                 '<a class="pat-inject" href="test.html#someid" data-pat-inject="confirm: never">link</a>'
             );
@@ -161,6 +171,8 @@ describe("pat-inject", function () {
 
             // Test that confirm doesn't get called
             pattern.init($a);
+            await utils.timeout(1); // wait a tick for async to settle.
+
             $a.trigger("click");
             expect(spy_confirm).not.toHaveBeenCalled();
             expect(spy_onTrigger).toHaveBeenCalled();
@@ -169,7 +181,7 @@ describe("pat-inject", function () {
             spy_confirm.mockRestore();
         });
 
-        it("3.3 - can be set to 'always' to always ask for confirmation before injecting", function () {
+        it("3.3 - can be set to 'always' to always ask for confirmation before injecting", async function () {
             var $a = $(
                 '<a class="pat-inject" href="test.html#someid" data-pat-inject="confirm: always">link</a>'
             );
@@ -186,6 +198,8 @@ describe("pat-inject", function () {
 
             // Test that confirm does get called
             pattern.init($a);
+            await utils.timeout(1); // wait a tick for async to settle.
+
             $a.trigger("click");
             expect(spy_onTrigger).toHaveBeenCalled();
             expect(spy_confirm).toHaveBeenCalled();
@@ -194,7 +208,7 @@ describe("pat-inject", function () {
             spy_confirm.mockRestore();
         });
 
-        it("3.4 - can be set to 'form-data' to ask for confirmation before injecting over form fields changed by the user", function () {
+        it("3.4 - can be set to 'form-data' to ask for confirmation before injecting over form fields changed by the user", async function () {
             var $a = $(
                 '<a class="pat-inject" href="test.html#someid" data-pat-inject="confirm: form-data">link</a>'
             );
@@ -213,6 +227,8 @@ describe("pat-inject", function () {
 
             // Test that confirm does get called
             pattern.init($a);
+            await utils.timeout(1); // wait a tick for async to settle.
+
             $a.trigger("click");
             expect(spy_confirm).toHaveBeenCalled();
 
@@ -226,7 +242,7 @@ describe("pat-inject", function () {
         });
 
         describe("3.5 - The confirm-message argument", function () {
-            it("3.5.1 - can be used to provide a custom confirmation prompt message", function () {
+            it("3.5.1 - can be used to provide a custom confirmation prompt message", async function () {
                 var $a = $(
                     '<a class="pat-inject" href="test.html#someid" data-pat-inject="confirm: always; confirm-message: Hello world">link</a>'
                 );
@@ -243,6 +259,8 @@ describe("pat-inject", function () {
 
                 // Test that confirm doesn't get called
                 pattern.init($a);
+                await utils.timeout(1); // wait a tick for async to settle.
+
                 $a.trigger("click");
                 expect(spy_confirm).toHaveBeenCalled();
                 expect(spy_confirm).toHaveBeenCalledWith("Hello world");
@@ -577,7 +595,10 @@ describe("pat-inject", function () {
             const callback = jest.fn();
             const inject_el = document.querySelector(".pat-inject");
             inject_el.addEventListener("pat-inject-success", callback);
+
             registry.scan(document.body);
+            await utils.timeout(1); // wait a tick for async to settle.
+
             inject_el.click();
             answer("<html><body><div></div></body></html>");
             await utils.timeout(1); // wait a tick for async to settle.
@@ -593,7 +614,10 @@ describe("pat-inject", function () {
             $("#lab").empty().append($a).append($div);
             var callback = jest.fn();
             $(document).on("patterns-injected", callback);
+
             pattern.init($a);
+            await utils.timeout(1); // wait a tick for async to settle.
+
             $a.trigger("click");
             answer("<html><body>" + '<div id="someid">repl</div>' + "</body></html>");
             await utils.timeout(1); // wait a tick for async to settle.
@@ -609,7 +633,10 @@ describe("pat-inject", function () {
             $("#lab").empty().append($a).append($div);
             var callback = jest.fn();
             $(document).on("patterns-injected-scanned", callback);
+
             pattern.init($a);
+            await utils.timeout(1); // wait a tick for async to settle.
+
             $a.trigger("click");
             answer(`
               <html>
@@ -633,7 +660,10 @@ describe("pat-inject", function () {
             $("#lab").empty().append($a).append($div);
             var callback = jest.fn();
             $(document.body).on("patterns-injected-delayed", callback);
+
             pattern.init($a);
+            await utils.timeout(1); // wait a tick for async to settle.
+
             $a.trigger("click");
             answer(`
               <html>
@@ -659,7 +689,10 @@ describe("pat-inject", function () {
             $("#lab").empty().append($a).append($div);
             var callback = jest.fn();
             $(document).on("patterns-injected-scanned", callback);
+
             pattern.init($a);
+            await utils.timeout(1); // wait a tick for async to settle.
+
             $a.trigger("click");
             answer(`
               <html>
@@ -683,7 +716,10 @@ describe("pat-inject", function () {
             $("#lab").empty().append($a).append($div);
             var callback = jest.fn();
             $(document).on("patterns-injected-scanned", callback);
+
             pattern.init($a);
+            await utils.timeout(1); // wait a tick for async to settle.
+
             $a.trigger("click");
             answer(`
               <html>
@@ -719,30 +755,38 @@ describe("pat-inject", function () {
                 spy_ajax.mockRestore();
             });
 
-            it("9.1.1 - fetches url on click", function () {
+            it("9.1.1 - fetches url on click", async function () {
                 pattern.init($a);
+                await utils.timeout(1); // wait a tick for async to settle.
+
                 $a.trigger("click");
                 expect($.ajax).toHaveBeenCalled();
                 expect($.ajax.mock.calls.pop()[0].url).toBe("test.html");
             });
 
-            it("9.1.2 - fetches url on autoload", function () {
+            it("9.1.2 - fetches url on autoload", async function () {
                 $a.attr("data-pat-inject", "autoload");
                 pattern.init($a);
+                await utils.timeout(1); // wait a tick for async to settle.
+
                 expect($.ajax).toHaveBeenCalled();
                 expect($.ajax.mock.calls.pop()[0].url).toBe("test.html");
             });
 
-            it("9.1.3 - fetches url on autoload-delayed", function () {
+            it("9.1.3 - fetches url on autoload-delayed", async function () {
                 $a.attr("data-pat-inject", "autoload-delayed");
                 pattern.init($a);
+                await utils.timeout(1); // wait a tick for async to settle.
+
                 // this needs to be checked async - is beyond me
                 // expect($.ajax).toHaveBeenCalled();
                 // expect($.ajax.mock.calls.pop()[0].url).toBe("test.html");
             });
-            it("9.1.4 - fetches url on push_marker sent", function () {
+            it("9.1.4 - fetches url on push_marker sent", async function () {
                 $a.attr("data-pat-inject", "push-marker: content-updated");
                 pattern.init($a);
+                await utils.timeout(1); // wait a tick for async to settle.
+
                 $("body").trigger("push", ["content-updated"]);
                 expect($.ajax).toHaveBeenCalled();
                 expect($.ajax.mock.calls.pop()[0].url).toBe("test.html");
@@ -750,6 +794,8 @@ describe("pat-inject", function () {
 
             it("9.1.5 - injects into existing div", async function () {
                 pattern.init($a);
+                await utils.timeout(1); // wait a tick for async to settle.
+
                 $a.trigger("click");
                 answer('<html><body><div id="someid">replacement</div></body></html>');
                 await utils.timeout(1); // wait a tick for async to settle.
@@ -758,6 +804,8 @@ describe("pat-inject", function () {
 
             it("9.1.6 - injects multiple times", async function () {
                 pattern.init($a);
+                await utils.timeout(1); // wait a tick for async to settle.
+
                 $a.trigger("click");
                 answer('<html><body><div id="someid">replacement</div></body></html>');
                 await utils.timeout(1); // wait a tick for async to settle.
@@ -789,6 +837,8 @@ describe("pat-inject", function () {
                 $div.append($target1).append($target2);
 
                 pattern.init($a);
+                await utils.timeout(1); // wait a tick for async to settle.
+
                 $a.trigger("click");
                 answer(
                     "<html><body>" +
@@ -809,6 +859,8 @@ describe("pat-inject", function () {
                 $div.append($target1).append($target2);
 
                 pattern.init($a);
+                await utils.timeout(1); // wait a tick for async to settle.
+
                 $a.trigger("click");
                 answer(
                     "<html><body>" + '<div id="someid">repl</div>' + "</body></html>"
@@ -823,6 +875,8 @@ describe("pat-inject", function () {
                 $a.attr("data-pat-inject", "#otherid::element #someid");
 
                 pattern.init($a);
+                await utils.timeout(1); // wait a tick for async to settle.
+
                 $a.trigger("click");
                 answer(
                     "<html><body>" +
@@ -840,6 +894,8 @@ describe("pat-inject", function () {
                 $div.append($('<div id="otherid" />'));
 
                 pattern.init($a);
+                await utils.timeout(1); // wait a tick for async to settle.
+
                 $a.trigger("click");
                 answer(
                     "<html><body>" +
@@ -862,6 +918,8 @@ describe("pat-inject", function () {
                 $div.append($target1).append($target2);
 
                 pattern.init($a);
+                await utils.timeout(1); // wait a tick for async to settle.
+
                 $a.trigger("click");
                 answer(
                     "<html><body>" + '<div id="someid">repl</div>' + "</body></html>"
@@ -877,6 +935,8 @@ describe("pat-inject", function () {
                 $div.append($('<div id="otherid" />'));
 
                 pattern.init($a);
+                await utils.timeout(1); // wait a tick for async to settle.
+
                 $a.trigger("click");
                 answer(
                     "<html><body>" + '<div id="someid">repl</div>' + "</body></html>"
@@ -904,6 +964,8 @@ describe("pat-inject", function () {
 
             it("9.2.1 - trigger injection on submit", async function () {
                 pattern.init($form);
+                await utils.timeout(1); // wait a tick for async to settle.
+
                 $form.trigger("submit");
                 answer(
                     "<html><body>" + '<div id="someid">repl</div>' + "</body></html>"
@@ -913,11 +975,13 @@ describe("pat-inject", function () {
                 expect($div.html()).toBe("repl");
             });
 
-            it("9.2.2 - pass get form parameters in ajax call as data", function () {
+            it("9.2.2 - pass get form parameters in ajax call as data", async function () {
                 $form.attr("method", "get");
                 $form.append($('<input type="text" name="param" value="somevalue" />'));
 
                 pattern.init($form);
+                await utils.timeout(1); // wait a tick for async to settle.
+
                 $form.trigger("submit");
 
                 var ajaxargs = $.ajax.mock.calls[$.ajax.mock.calls.length - 1][0];
@@ -925,11 +989,13 @@ describe("pat-inject", function () {
                 expect(ajaxargs.data).toContain("param=somevalue");
             });
 
-            it("9.2.3 - pass post form parameters in ajax call as data", function () {
+            it("9.2.3 - pass post form parameters in ajax call as data", async function () {
                 $form.attr("method", "post");
                 $form.append($('<input type="text" name="param" value="somevalue" />'));
 
                 pattern.init($form);
+                await utils.timeout(1); // wait a tick for async to settle.
+
                 $form.trigger("submit");
 
                 var ajaxargs = $.ajax.mock.calls[$.ajax.mock.calls.length - 1][0];
@@ -937,13 +1003,15 @@ describe("pat-inject", function () {
                 expect(ajaxargs.data.get("param")).toContain("somevalue");
             });
 
-            it("9.2.4 - pass submit button value in ajax call as data", function () {
+            it("9.2.4 - pass submit button value in ajax call as data", async function () {
                 var $submit = $('<input type="submit" name="submit" value="label" />');
 
                 $form.attr("method", "post");
                 $form.append($submit);
 
                 pattern.init($form);
+                await utils.timeout(1); // wait a tick for async to settle.
+
                 $submit.trigger("click");
 
                 var ajaxargs = $.ajax.mock.calls[$.ajax.mock.calls.length - 1][0];
@@ -952,19 +1020,20 @@ describe("pat-inject", function () {
             });
 
             describe("9.2.5 - formaction attribute on submit buttons", function () {
-                it("9.2.5.1 - use submit button formaction value as action URL", function () {
+                it("9.2.5.1 - use submit button formaction value as action URL", async function () {
                     var $submit1 = $(
                             '<input type="submit" name="submit" value="default" />'
                         ),
                         $submit2 = $(
-                            '<input type="submit" name="submit" value="special" />'
+                            '<input type="submit" name="submit" value="special" formaction="other.html" />'
                         );
 
-                    $submit2.attr("formaction", "other.html");
                     $form.append($submit1).append($submit2);
 
                     pattern.init($form);
-                    $submit2.trigger("click");
+                    await utils.timeout(1); // wait a tick for async to settle.
+
+                    $submit2[0].click();
 
                     var ajaxargs = $.ajax.mock.calls[$.ajax.mock.calls.length - 1][0];
                     expect($.ajax).toHaveBeenCalled();
@@ -972,19 +1041,25 @@ describe("pat-inject", function () {
                     expect(ajaxargs.data).toBe("submit=special");
                 });
 
-                it("9.2.5.2 - use an image submit with a formaction value as action URL", function () {
+                it("9.2.5.2 - use an image submit with a formaction value as action URL", async function () {
                     var $submit1 = $(
                             '<input type="submit" name="submit" value="default" />'
                         ),
                         $submit2 = $(
-                            '<input type="image" name="submit" value="special" />'
+                            '<input type="image" name="submit" value="special" formaction="other.html" />'
                         );
 
-                    $submit2.attr("formaction", "other.html");
                     $form.append($submit1).append($submit2);
 
                     pattern.init($form);
-                    $submit2.trigger("click");
+                    await utils.timeout(1); // wait a tick for async to settle.
+
+                    // Work around jsDOM not submitting with image buttons.
+                    $submit2[0].addEventListener("click", () => {
+                        $submit2[0].form.dispatchEvent(events.submit_event());
+                    });
+
+                    $submit2[0].click();
 
                     var ajaxargs = $.ajax.mock.calls[$.ajax.mock.calls.length - 1][0];
                     expect($.ajax).toHaveBeenCalled();
@@ -997,16 +1072,18 @@ describe("pat-inject", function () {
                             '<input type="submit" name="submit" value="default" />'
                         ),
                         $submit2 = $(
-                            '<input type="submit" name="submit" value="special" />'
+                            '<input type="submit" name="submit" value="special" formaction="other.html#otherid" />'
                         ),
                         $target = $('<div id="otherid" />');
 
-                    $submit2.attr("formaction", "other.html#otherid");
                     $form.append($submit1).append($submit2);
                     $div.append($target);
 
                     pattern.init($form);
-                    $submit2.trigger("click");
+                    await utils.timeout(1); // wait a tick for async to settle.
+
+                    $submit2[0].click();
+
                     answer(
                         "<html><body>" +
                             '<div id="otherid">other</div>' +
@@ -1026,17 +1103,19 @@ describe("pat-inject", function () {
                             '<input type="submit" name="submit" value="default" />'
                         ),
                         $submit2 = $(
-                            '<input type="submit" name="submit" value="special" />'
+                            '<input type="submit" name="submit" value="special" formaction="other.html#otherid" />'
                         ),
                         $target = $('<div id="othertarget" />');
 
                     $form.attr("data-pat-inject", "target: #othertarget");
-                    $submit2.attr("formaction", "other.html#otherid");
                     $form.append($submit1).append($submit2);
                     $div.append($target);
 
                     pattern.init($form);
-                    $submit2.trigger("click");
+                    await utils.timeout(1); // wait a tick for async to settle.
+
+                    $submit2[0].click();
+
                     answer(
                         "<html><body>" +
                             '<div id="otherid">other</div>' +
@@ -1056,7 +1135,7 @@ describe("pat-inject", function () {
                             '<input type="submit" name="submit" value="default" />'
                         ),
                         $submit2 = $(
-                            '<input type="submit" name="submit" value="special" />'
+                            '<input type="submit" name="submit" value="special" formaction="other.html#otherid" />'
                         ),
                         $target1 = $('<div id="target1" />'),
                         $target2 = $('<div id="target2" />');
@@ -1065,12 +1144,14 @@ describe("pat-inject", function () {
                         "data-pat-inject",
                         "target: #target1 && target: #target2"
                     );
-                    $submit2.attr("formaction", "other.html#otherid");
                     $form.append($submit1).append($submit2);
                     $div.append($target1).append($target2);
 
                     pattern.init($form);
-                    $submit2.trigger("click");
+                    await utils.timeout(1); // wait a tick for async to settle.
+
+                    $submit2[0].click();
+
                     answer(
                         "<html><body>" +
                             '<div id="otherid">other</div>' +
@@ -1091,7 +1172,7 @@ describe("pat-inject", function () {
                             '<input type="submit" name="submit" value="default" />'
                         ),
                         $submit2 = $(
-                            '<input type="submit" name="submit" value="special" />'
+                            '<input type="submit" name="submit" value="special" formaction="other.html#otherid" />'
                         ),
                         $target1 = $('<div id="target1" />'),
                         $target2 = $('<div id="target2" />');
@@ -1100,12 +1181,14 @@ describe("pat-inject", function () {
                         "data-pat-inject",
                         "#someid #target1 && #otherid #target2"
                     );
-                    $submit2.attr("formaction", "other.html#otherid");
                     $form.append($submit1).append($submit2);
                     $div.append($target1).append($target2);
 
                     pattern.init($form);
-                    $submit2.trigger("click");
+                    await utils.timeout(1); // wait a tick for async to settle.
+
+                    $submit2[0].click();
+
                     answer(
                         "<html><body>" +
                             '<div id="someid">some</div>' +
@@ -1127,7 +1210,7 @@ describe("pat-inject", function () {
                             '<input type="submit" name="submit" value="default" />'
                         ),
                         $submit2 = $(
-                            '<input type="submit" name="submit" value="special" />'
+                            '<input type="submit" name="submit" value="special" formaction="other.html#otherid" />'
                         ),
                         $target1 = $('<div id="target1" />'),
                         $target2 = $('<div id="target2" />');
@@ -1136,12 +1219,14 @@ describe("pat-inject", function () {
                         "data-pat-inject",
                         "#someid #target1 && #otherid #target2"
                     );
-                    $submit2.attr("formaction", "other.html#otherid");
                     $form.append($submit1).append($submit2);
                     $div.append($target1).append($target2);
 
                     pattern.init($form);
-                    $submit2.trigger("click");
+                    await utils.timeout(1); // wait a tick for async to settle.
+
+                    $submit2[0].click();
+
                     answer(
                         "<html><body>" +
                             '<div id="someid">some</div>' +
@@ -1236,6 +1321,8 @@ describe("pat-inject", function () {
                     const button = form.querySelector("button");
 
                     pattern.init($(form));
+                    await utils.timeout(1); // wait a tick for async to settle.
+
                     button.click();
 
                     expect(pat_ajax.onClickSubmit).toHaveBeenCalledTimes(1);
@@ -1252,19 +1339,21 @@ describe("pat-inject", function () {
 
                     const pat_ajax = (await import("../ajax/ajax.js")).default;
                     jest.spyOn(pat_ajax, "onClickSubmit");
-                    jest.spyOn(pattern, "onFormActionSubmit");
+                    jest.spyOn(pattern, "onTrigger");
 
                     const form = document.querySelector("form");
                     const button = form.querySelector("button");
 
                     pattern.init($(form));
+                    await utils.timeout(1); // wait a tick for async to settle.
+
                     button.click();
 
                     expect(pat_ajax.onClickSubmit).toHaveBeenCalledTimes(1);
-                    expect(pattern.onFormActionSubmit).toHaveBeenCalledTimes(0);
+                    expect(pattern.onTrigger).toHaveBeenCalledTimes(1);
                 });
 
-                it("9.2.6.1 - ... with a formaction atttribute.", async function () {
+                it("9.2.6.2 - ... with a formaction atttribute.", async function () {
                     document.body.innerHTML = `
                         <form class="pat-inject">
                             <button formaction="test.cgi"/>
@@ -1273,16 +1362,18 @@ describe("pat-inject", function () {
 
                     const pat_ajax = (await import("../ajax/ajax.js")).default;
                     jest.spyOn(pat_ajax, "onClickSubmit");
-                    jest.spyOn(pattern, "onFormActionSubmit");
+                    jest.spyOn(pattern, "onTrigger");
 
                     const form = document.querySelector("form");
                     const button = form.querySelector("button");
 
                     pattern.init($(form));
+                    await utils.timeout(1); // wait a tick for async to settle.
+
                     button.click();
 
                     expect(pat_ajax.onClickSubmit).toHaveBeenCalledTimes(1);
-                    expect(pattern.onFormActionSubmit).toHaveBeenCalledTimes(1);
+                    expect(pattern.onTrigger).toHaveBeenCalledTimes(1);
                 });
             });
         });
@@ -1311,6 +1402,7 @@ describe("pat-inject", function () {
 
         it("10.1 - Adds on error a data-error-message to body in standard case.", async () => {
             pattern.init($a);
+            await utils.timeout(1); // wait a tick for async to settle.
 
             // Invoke error case
             pattern._onInjectError($a, [], {
@@ -1344,6 +1436,7 @@ describe("pat-inject", function () {
             `;
 
             pattern.init($a);
+            await utils.timeout(1); // wait a tick for async to settle.
 
             // Invoke error case
             pattern._onInjectError($a, [], {
@@ -1367,7 +1460,9 @@ describe("pat-inject", function () {
             `;
 
             $a = $(".pat-inject");
+
             pattern.init($a);
+            await utils.timeout(1); // wait a tick for async to settle.
 
             // Invoke error case
             pattern._onInjectError(
@@ -1416,6 +1511,7 @@ describe("pat-inject", function () {
             `;
 
             pattern.init($a);
+            await utils.timeout(1); // wait a tick for async to settle.
 
             // Invoke error case
             pattern._onInjectError($a, [], {
@@ -1450,6 +1546,7 @@ describe("pat-inject", function () {
             $a = $(".pat-inject");
 
             pattern.init($a);
+            await utils.timeout(1); // wait a tick for async to settle.
 
             // Invoke error case
             pattern._onInjectError($a, [], {
@@ -1509,6 +1606,7 @@ describe("pat-inject", function () {
             $a = $(".pat-inject");
 
             pattern.init($a);
+            await utils.timeout(1); // wait a tick for async to settle.
 
             // Invoke error case
             pattern._onInjectError($a, [], {
@@ -1556,6 +1654,7 @@ describe("pat-inject", function () {
             $a = $(".pat-inject");
 
             pattern.init($a);
+            await utils.timeout(1); // wait a tick for async to settle.
 
             // Invoke error case
             pattern._onInjectError($a, [], {
@@ -1601,6 +1700,7 @@ describe("pat-inject", function () {
                         trigger: autoload-visible">test</a>
             `;
             const el = document.querySelector(".pat-inject");
+
             pattern.init($(el));
             await utils.timeout(1);
 
@@ -1650,6 +1750,7 @@ describe("pat-inject", function () {
                         trigger: autoload-visible">test</a>
             `;
             const el = document.querySelector(".pat-inject");
+
             pattern.init($(el));
             await utils.timeout(1);
 
@@ -1682,8 +1783,10 @@ describe("pat-inject", function () {
                 href="hello.html"
                 class="pat-inject"
                 />`;
+
             registry.scan(document.body);
             await utils.timeout(1);
+
             document.body.querySelector(".pat-inject").click();
             const ajaxargs = spy_ajax.mock.calls[spy_ajax.mock.calls.length - 1][0];
             expect(ajaxargs.cache).toBe(false);
@@ -1697,8 +1800,10 @@ describe("pat-inject", function () {
                 class="pat-inject"
                 data-pat-inject="browser-cache: no-cache"
                 />`;
+
             registry.scan(document.body);
             await utils.timeout(1);
+
             document.body.querySelector(".pat-inject").click();
             const ajaxargs = spy_ajax.mock.calls[spy_ajax.mock.calls.length - 1][0];
             expect(ajaxargs.cache).toBe(false);
@@ -1712,8 +1817,10 @@ describe("pat-inject", function () {
                 class="pat-inject"
                 data-pat-inject="browser-cache: cache"
                 />`;
+
             registry.scan(document.body);
             await utils.timeout(1);
+
             document.body.querySelector(".pat-inject").click();
             const ajaxargs = spy_ajax.mock.calls[spy_ajax.mock.calls.length - 1][0];
             expect(ajaxargs.cache).toBe(true);
@@ -1728,8 +1835,10 @@ describe("pat-inject", function () {
                 method="POST"
                 data-pat-ajax="browser-cache: cache"
                 />`;
+
             registry.scan(document.body);
             await utils.timeout(1);
+
             $(".pat-inject").submit(); // need jquery submit here
             const ajaxargs = spy_ajax.mock.calls[spy_ajax.mock.calls.length - 1][0];
             expect(ajaxargs.cache).toBe(false);
diff --git a/src/pat/modal/modal.js b/src/pat/modal/modal.js
index 63304394f..d73a660a8 100644
--- a/src/pat/modal/modal.js
+++ b/src/pat/modal/modal.js
@@ -24,7 +24,7 @@ export default Base.extend({
     // links, forms and subforms inject modals
     trigger: "div.pat-modal, a.pat-modal, form.pat-modal, .pat-modal.pat-subform",
 
-    init($el, opts, trigger) {
+    async init($el, opts, trigger) {
         if (window.__patternslib_import_styles) {
             import("./_modal.scss");
         }
@@ -36,11 +36,11 @@ export default Base.extend({
         if (this.$el.is("div")) {
             this._init_div1();
         } else {
-            this._init_inject1();
+            await this._init_inject1();
         }
     },
 
-    _init_inject1() {
+    async _init_inject1() {
         // This will get remote content via pat-inject, add the pat-modal class
         // to the result and pat-inject's pattern scanning will then call
         // ``_init_div1``.
@@ -67,7 +67,7 @@ export default Base.extend({
             $("#pat-modal").detach();
         });
 
-        inject.init(this.$el, opts);
+        await inject.init(this.$el, opts);
     },
 
     _init_div1() {
diff --git a/src/pat/modal/modal.test.js b/src/pat/modal/modal.test.js
index 1988b80b4..1a61ad730 100644
--- a/src/pat/modal/modal.test.js
+++ b/src/pat/modal/modal.test.js
@@ -1,4 +1,5 @@
 import $ from "jquery";
+import events from "../../core/events";
 import pattern from "./modal";
 import registry from "../../core/registry";
 import utils from "../../core/utils";
@@ -81,37 +82,29 @@ describe("pat-modal", function () {
             expect($("body").hasClass("modal-active")).toBeTruthy();
         });
 
-        it("1.4 - Modal with a form that has the pat-modal CSS class", function () {
+        it("1.4 - Modal with a form that has the pat-modal CSS class", async function () {
             var $modal, // main modal container
                 $modalLink; // link that triggers the modal
 
-            $("#lab").html(
-                [
-                    '<a id="modalLink" class="pat-modal"',
-                    '   href="some-page-with-modal.html">Open a modal',
-                    "   containing a form with pat-modal CSS class.</a>",
-                ].join("/n")
-            );
+            $("#lab")[0].innerHTML = `
+                <a id="modalLink"
+                   class="pat-modal"
+                   href="some-page-with-modal.html">
+                    Open a modal containing a form with pat-modal CSS class.
+                </a>
+            `;
 
             $modalLink = $("#modalLink");
-            pattern.init($modalLink);
+            const instance = new pattern($modalLink);
+            await events.await_pattern_init(instance);
 
             // najprej #modalLink ne obstaja
             $modal = $("div#pat-modal");
             expect($modal.length).toBe(0);
 
             $modalLink.click(); // trigger panel loading
+            utils.timeout(1); // wait a tick for async to settle.
 
-            // TODO: we need to insert a delay here so that the asynchronous
-            // AJAX injection of the potentially problematic HTML finishes ...
-            // and only AFTER THAT we test that everything is still OK
-            // (read: that the modal still exists in DOM)
-            // NOTE: If AJAX request in inject.execute() is performed in a
-            // synchronous way, a delay is not need and this test detects a
-            // bug in modal._init_inject1()
-
-            // div#pat-modal should still exist even after the click has
-            // loaded and injected problematic HTML
             $modal = $("div#pat-modal");
             expect($modal.length).toBeGreaterThan(0);
         });
@@ -341,6 +334,7 @@ describe("pat-modal", function () {
 
         el.click();
         await utils.timeout(1); // wait a tick for async to settle.
+        await utils.timeout(1); // wait a tick for async to settle.
 
         expect(document.querySelectorAll("#pat-modal").length).toBe(1);
 
@@ -390,6 +384,7 @@ describe("pat-modal", function () {
 
         el.click();
         await utils.timeout(1); // wait a tick for async to settle.
+        await utils.timeout(1); // wait a tick for async to settle.
 
         expect(document.querySelectorAll("#pat-modal").length).toBe(1);
 
diff --git a/src/pat/navigation/navigation.test.js b/src/pat/navigation/navigation.test.js
index 67ed23894..a776f79ad 100644
--- a/src/pat/navigation/navigation.test.js
+++ b/src/pat/navigation/navigation.test.js
@@ -201,6 +201,7 @@ describe("2 - Navigation pattern tests - mark after navigation injection", funct
         set_url("https://patternslib.com/path/to/test");
 
         Registry.scan(document.body);
+        await utils.timeout(1); // wait a tick for async to settle.
 
         const nav = document.querySelector("nav");
         const load_nav = document.querySelector(".load-nav");
diff --git a/src/pat/sortable/sortable.test.js b/src/pat/sortable/sortable.test.js
index b9b35ee6f..23c4e713e 100644
--- a/src/pat/sortable/sortable.test.js
+++ b/src/pat/sortable/sortable.test.js
@@ -200,6 +200,7 @@ describe("pat-sortable", function () {
         const sortable = new Sortable(el);
         const el_inject = document.querySelector(".pat-inject");
         Inject.init($(el_inject));
+        await utils.timeout(1); // wait a tick for async to settle.
 
         el_inject.click();
         await utils.timeout(1);