Skip to content

Commit fdf0998

Browse files
thetthet
authored
Merge pull request #1186 from Patternslib/scrum-1670--inject-button-issue
fix(pat inject): Fix issue with submit buttons which are added later.
2 parents c8cfb03 + edf9f5e commit fdf0998

3 files changed

Lines changed: 94 additions & 32 deletions

File tree

‎src/pat/inject/index.html‎

Lines changed: 42 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -425,20 +425,52 @@ <h3>Inject and fix URLs of options</h3>
425425
</div>
426426
</section>
427427

428-
<div id="inject-demo__content-wrapper" style="display: none">
429-
<section id="inject-demo__content">Liked</section>
430-
</div>
428+
<template id="inject-demo__like--anchor">
429+
<a
430+
type="button"
431+
class="pat-inject"
432+
href="./#inject-demo__dislike--anchor"
433+
data-pat-inject="target: self::element"
434+
>Like</a>
435+
</template>
436+
437+
<template id="inject-demo__dislike--anchor">
438+
<a
439+
type="button"
440+
class="pat-inject"
441+
href="./#inject-demo__like--anchor"
442+
data-pat-inject="target: self::element"
443+
>Dislike</a>
444+
</template>
445+
446+
<template id="inject-demo__like--button">
447+
<button
448+
type="submit"
449+
name="like_button"
450+
value="like"
451+
formaction="./#inject-demo__dislike--button"
452+
class="pat-inject"
453+
data-pat-inject="target: self::element">Like</button>
454+
</template>
455+
456+
<template id="inject-demo__dislike--button">
457+
<button
458+
type="submit"
459+
name="like_button"
460+
value="dislike"
461+
formaction="./#inject-demo__like--button"
462+
class="pat-inject"
463+
data-pat-inject="target: self::element">Dislike</button>
464+
</template>
431465

432466
<section>
433467
<h3>Can replace itself</h3>
434468
<a
435469
type="button"
436470
class="pat-inject"
437-
href="./#inject-demo__content"
471+
href="./#inject-demo__dislike--anchor"
438472
data-pat-inject="target: self::element"
439-
>
440-
Like
441-
</a>
473+
>Like</a>
442474
</section>
443475

444476
<section>
@@ -451,7 +483,9 @@ <h3>Can replace itself when a button in a form</h3>
451483
data-pat-inject="target: inject-demo__content-wrapper::element">
452484
<button
453485
type="submit"
454-
formaction="./#inject-demo__content"
486+
name="like_button"
487+
value="like"
488+
formaction="./#inject-demo__dislike--button"
455489
class="pat-inject"
456490
data-pat-inject="target: self::element">Like</button>
457491
</form>

‎src/pat/inject/inject.js‎

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,22 @@ const inject = {
105105
});
106106
// setup event handlers
107107
if ($el[0]?.tagName === "FORM") {
108+
events.add_event_listener(
109+
$el[0],
110+
"click",
111+
"pat-inject--form-submit-click",
112+
(e) => {
113+
if (
114+
e.target.matches(
115+
"[type=submit], button:not([type=button]), [type=image]"
116+
)
117+
) {
118+
// make sure the submitting button is sent
119+
// with the form
120+
ajax.onClickSubmit(e);
121+
}
122+
}
123+
);
108124
events.add_event_listener(
109125
$el[0],
110126
"submit",
@@ -113,20 +129,6 @@ const inject = {
113129
this.onTrigger(e);
114130
}
115131
);
116-
for (const button of $el[0].querySelectorAll(
117-
"[type=submit], button:not([type=button]), [type=image]"
118-
)) {
119-
events.add_event_listener(
120-
button,
121-
"click",
122-
"pat-inject--form-submit-click",
123-
(e) => {
124-
// make sure the submitting button is sent
125-
// with the form
126-
ajax.onClickSubmit(e);
127-
}
128-
);
129-
}
130132
} else if ($el.is(".pat-subform")) {
131133
log.debug("Initializing subform with injection");
132134
} else {

‎src/pat/inject/inject.test.js‎

Lines changed: 36 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1044,24 +1044,27 @@ describe("pat-inject", function () {
10441044
});
10451045

10461046
it("9.2.5.2 - use an image submit with a formaction value as action URL", async function () {
1047-
var $submit1 = $(
1048-
'<input type="submit" name="submit" value="default" />'
1049-
),
1050-
$submit2 = $(
1051-
'<input type="image" name="submit" value="special" formaction="other.html" />'
1052-
);
1047+
const $submit = $(`
1048+
<input
1049+
type="image"
1050+
name="submit"
1051+
value="special"
1052+
formaction="other.html" />
1053+
`);
10531054

1054-
$form.append($submit1).append($submit2);
1055+
$form.append($submit);
10551056

10561057
pattern.init($form);
10571058
await utils.timeout(1); // wait a tick for async to settle.
10581059

10591060
// Work around jsDOM not submitting with image buttons.
1060-
$submit2[0].addEventListener("click", () => {
1061-
$submit2[0].form.dispatchEvent(events.submit_event());
1061+
$submit[0].addEventListener("click", async () => {
1062+
await utils.timeout(1); // wait a tick for click event reaching form before submitting.
1063+
$submit[0].form.dispatchEvent(events.submit_event());
10621064
});
10631065

1064-
$submit2[0].click();
1066+
$submit[0].click();
1067+
await utils.timeout(1); // wait a tick for click handler
10651068

10661069
var ajaxargs = $.ajax.mock.calls[$.ajax.mock.calls.length - 1][0];
10671070
expect($.ajax).toHaveBeenCalled();
@@ -1378,6 +1381,29 @@ describe("pat-inject", function () {
13781381
expect(pattern.onTrigger).toHaveBeenCalledTimes(1);
13791382
});
13801383
});
1384+
1385+
it("9.2.7 - Sends submit button form values even if submit button is added after initialization.", async function () {
1386+
document.body.innerHTML = `
1387+
<form class="pat-inject" action="test.cgi">
1388+
</form>
1389+
`;
1390+
1391+
const pat_ajax = (await import("../ajax/ajax.js")).default;
1392+
jest.spyOn(pat_ajax, "onClickSubmit");
1393+
jest.spyOn(pattern, "onTrigger");
1394+
1395+
const form = document.querySelector("form");
1396+
1397+
pattern.init($(form));
1398+
await utils.timeout(1); // wait a tick for async to settle.
1399+
1400+
form.innerHTML = `<button type="submit"/>`;
1401+
const button = form.querySelector("button");
1402+
button.click();
1403+
1404+
expect(pat_ajax.onClickSubmit).toHaveBeenCalledTimes(1);
1405+
expect(pattern.onTrigger).toHaveBeenCalledTimes(1);
1406+
});
13811407
});
13821408
});
13831409

0 commit comments

Comments
 (0)