Skip to content

Commit bd19154

Browse files
committed
fix(core dom find_form, pat autosubmit): Add support for pat-subform.
Subform was recently lost when introducing dom.find_form. Now subform support is back in pat-autosubmit.
1 parent 8252014 commit bd19154

File tree

3 files changed

+53
-4
lines changed

3 files changed

+53
-4
lines changed

src/core/dom.js

+4-3
Original file line numberDiff line numberDiff line change
@@ -569,11 +569,12 @@ const element_uuid = (el) => {
569569
const find_form = (el) => {
570570
// Prefer input.form which allows for input outside form elements and fall
571571
// back to search for a parent form.
572-
return (
572+
const form =
573+
el.closest(".pat-subform") || // Special Patternslib subform concept has precedence.
573574
el.form ||
574575
el.querySelector("input, select, textarea, button")?.form ||
575-
el.closest("form")
576-
);
576+
el.closest("form");
577+
return form;
577578
};
578579

579580
const dom = {

src/core/dom.test.js

+14
Original file line numberDiff line numberDiff line change
@@ -1002,4 +1002,18 @@ describe("find_form", function () {
10021002
const form = document.querySelector("#the-form");
10031003
expect(dom.find_form(el)).toBe(form);
10041004
});
1005+
1006+
it("example 9 - subform support", function () {
1007+
// Subform support. Subforms have precedence over forms.
1008+
document.body.innerHTML = `
1009+
<form>
1010+
<div class="pat-subform">
1011+
<button></button>
1012+
</div>
1013+
</form>
1014+
`;
1015+
const el = document.querySelector("button");
1016+
const subform = document.querySelector(".pat-subform");
1017+
expect(dom.find_form(el)).toBe(subform);
1018+
});
10051019
});

src/pat/auto-submit/auto-submit.test.js

+35-1
Original file line numberDiff line numberDiff line change
@@ -187,7 +187,7 @@ describe("pat-autosubmit", function () {
187187
expect(submit_form_dispatched).toBe(true);
188188
});
189189

190-
it("2.6 - when pat-autosubmit is defined not on aform element", async function () {
190+
it("2.6 - when pat-autosubmit is defined not on a form element", async function () {
191191
document.body.innerHTML = `
192192
<form>
193193
<div
@@ -211,6 +211,40 @@ describe("pat-autosubmit", function () {
211211
await utils.timeout(1);
212212
expect(submit_form_dispatched).toBe(true);
213213
});
214+
215+
it("2.7 - directly on a pat-subform", async function () {
216+
document.body.innerHTML = `
217+
<form>
218+
<div class="pat-subform">
219+
<input
220+
class="pat-autosubmit"
221+
data-pat-autosubmit="delay: 0"
222+
name="q">
223+
</div>
224+
</form>
225+
`;
226+
const input = document.querySelector("input");
227+
const subform = document.querySelector(".pat-subform");
228+
const autosubmit = document.querySelector(".pat-autosubmit");
229+
new Pattern(autosubmit);
230+
231+
// The submit event should be invoked on the subform.
232+
let submit_subform_dispatched = false;
233+
subform.addEventListener("submit", () => {
234+
submit_subform_dispatched = true;
235+
});
236+
237+
// The submit event should also bubble up to the form.
238+
let submit_form_dispatched = false;
239+
document.querySelector("form").addEventListener("submit", () => {
240+
submit_form_dispatched = true;
241+
});
242+
243+
input.dispatchEvent(events.input_event());
244+
await utils.timeout(1);
245+
expect(submit_subform_dispatched).toBe(true);
246+
expect(submit_form_dispatched).toBe(true);
247+
});
214248
});
215249

216250
describe("3 - Parsing of the delay option", function () {

0 commit comments

Comments
 (0)