Skip to content

Commit

Permalink
fix(core dom find_form, pat autosubmit): Add support for pat-subform.
Browse files Browse the repository at this point in the history
Subform was recently lost when introducing dom.find_form.
Now subform support is back in pat-autosubmit.
  • Loading branch information
thet committed Nov 17, 2023
1 parent 8252014 commit bd19154
Show file tree
Hide file tree
Showing 3 changed files with 53 additions and 4 deletions.
7 changes: 4 additions & 3 deletions src/core/dom.js
Original file line number Diff line number Diff line change
Expand Up @@ -569,11 +569,12 @@ const element_uuid = (el) => {
const find_form = (el) => {
// Prefer input.form which allows for input outside form elements and fall
// back to search for a parent form.
return (
const form =
el.closest(".pat-subform") || // Special Patternslib subform concept has precedence.
el.form ||
el.querySelector("input, select, textarea, button")?.form ||
el.closest("form")
);
el.closest("form");
return form;
};

const dom = {
Expand Down
14 changes: 14 additions & 0 deletions src/core/dom.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -1002,4 +1002,18 @@ describe("find_form", function () {
const form = document.querySelector("#the-form");
expect(dom.find_form(el)).toBe(form);
});

it("example 9 - subform support", function () {
// Subform support. Subforms have precedence over forms.
document.body.innerHTML = `
<form>
<div class="pat-subform">
<button></button>
</div>
</form>
`;
const el = document.querySelector("button");
const subform = document.querySelector(".pat-subform");
expect(dom.find_form(el)).toBe(subform);
});
});
36 changes: 35 additions & 1 deletion src/pat/auto-submit/auto-submit.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -187,7 +187,7 @@ describe("pat-autosubmit", function () {
expect(submit_form_dispatched).toBe(true);
});

it("2.6 - when pat-autosubmit is defined not on aform element", async function () {
it("2.6 - when pat-autosubmit is defined not on a form element", async function () {
document.body.innerHTML = `
<form>
<div
Expand All @@ -211,6 +211,40 @@ describe("pat-autosubmit", function () {
await utils.timeout(1);
expect(submit_form_dispatched).toBe(true);
});

it("2.7 - directly on a pat-subform", async function () {
document.body.innerHTML = `
<form>
<div class="pat-subform">
<input
class="pat-autosubmit"
data-pat-autosubmit="delay: 0"
name="q">
</div>
</form>
`;
const input = document.querySelector("input");
const subform = document.querySelector(".pat-subform");
const autosubmit = document.querySelector(".pat-autosubmit");
new Pattern(autosubmit);

// The submit event should be invoked on the subform.
let submit_subform_dispatched = false;
subform.addEventListener("submit", () => {
submit_subform_dispatched = true;
});

// The submit event should also bubble up to the form.
let submit_form_dispatched = false;
document.querySelector("form").addEventListener("submit", () => {
submit_form_dispatched = true;
});

input.dispatchEvent(events.input_event());
await utils.timeout(1);
expect(submit_subform_dispatched).toBe(true);
expect(submit_form_dispatched).toBe(true);
});
});

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

0 comments on commit bd19154

Please sign in to comment.