From edf9f5e0ca3899a13b5107c19c3bf6fcc376e10b Mon Sep 17 00:00:00 2001 From: Johannes Raggam Date: Fri, 3 Nov 2023 18:45:20 +0100 Subject: [PATCH] fix(pat inject): Fix issue with submit buttons which are added later. Fix an issue with submit buttons which were added after initialization of pat-inject which did not send their value (e.g. via a pat-inject call). Ref: scrum-1670 --- src/pat/inject/index.html | 50 +++++++++++++++++++++++++++++------ src/pat/inject/inject.js | 30 +++++++++++---------- src/pat/inject/inject.test.js | 46 +++++++++++++++++++++++++------- 3 files changed, 94 insertions(+), 32 deletions(-) diff --git a/src/pat/inject/index.html b/src/pat/inject/index.html index 19bf5f7bd..179b64565 100644 --- a/src/pat/inject/index.html +++ b/src/pat/inject/index.html @@ -425,20 +425,52 @@

Inject and fix URLs of options

- + + + + + + +

Can replace itself

- Like - + >Like
@@ -451,7 +483,9 @@

Can replace itself when a button in a form

data-pat-inject="target: inject-demo__content-wrapper::element"> diff --git a/src/pat/inject/inject.js b/src/pat/inject/inject.js index f33049ff1..c3e2f0e62 100644 --- a/src/pat/inject/inject.js +++ b/src/pat/inject/inject.js @@ -105,6 +105,22 @@ const inject = { }); // setup event handlers if ($el[0]?.tagName === "FORM") { + events.add_event_listener( + $el[0], + "click", + "pat-inject--form-submit-click", + (e) => { + if ( + e.target.matches( + "[type=submit], button:not([type=button]), [type=image]" + ) + ) { + // make sure the submitting button is sent + // with the form + ajax.onClickSubmit(e); + } + } + ); events.add_event_listener( $el[0], "submit", @@ -113,20 +129,6 @@ const inject = { 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 { diff --git a/src/pat/inject/inject.test.js b/src/pat/inject/inject.test.js index 4ab1dcf7f..661b15e13 100644 --- a/src/pat/inject/inject.test.js +++ b/src/pat/inject/inject.test.js @@ -1044,24 +1044,27 @@ describe("pat-inject", function () { }); it("9.2.5.2 - use an image submit with a formaction value as action URL", async function () { - var $submit1 = $( - '' - ), - $submit2 = $( - '' - ); + const $submit = $(` + + `); - $form.append($submit1).append($submit2); + $form.append($submit); pattern.init($form); 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()); + $submit[0].addEventListener("click", async () => { + await utils.timeout(1); // wait a tick for click event reaching form before submitting. + $submit[0].form.dispatchEvent(events.submit_event()); }); - $submit2[0].click(); + $submit[0].click(); + await utils.timeout(1); // wait a tick for click handler var ajaxargs = $.ajax.mock.calls[$.ajax.mock.calls.length - 1][0]; expect($.ajax).toHaveBeenCalled(); @@ -1378,6 +1381,29 @@ describe("pat-inject", function () { expect(pattern.onTrigger).toHaveBeenCalledTimes(1); }); }); + + it("9.2.7 - Sends submit button form values even if submit button is added after initialization.", async function () { + document.body.innerHTML = ` +
+
+ `; + + const pat_ajax = (await import("../ajax/ajax.js")).default; + jest.spyOn(pat_ajax, "onClickSubmit"); + jest.spyOn(pattern, "onTrigger"); + + const form = document.querySelector("form"); + + pattern.init($(form)); + await utils.timeout(1); // wait a tick for async to settle. + + form.innerHTML = `