Skip to content

Commit

Permalink
fix(pat autosubmit): Re-add support for autosubmit on non form elements.
Browse files Browse the repository at this point in the history
Fix a problem introduces in Patternslib 9.9.7 where pat-autosubmit did
not work when not defined on a form or input element.

As a side effect, the submit event is now always invoked on the related
or nearest form of the element where pat-autosubmit was defined on. If
that element is not a form element a related (input.form) or the nearest
parent form is searched and the submit event invoked upon.
thet committed Nov 9, 2023

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
1 parent 01b348d commit a2530f3
Showing 3 changed files with 39 additions and 20 deletions.
7 changes: 5 additions & 2 deletions src/pat/auto-submit/auto-submit.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import "../../core/jquery-ext";
import $ from "jquery";
import Base from "../../core/base";
import dom from "../../core/dom";
import events from "../../core/events";
import input_change_events from "../../lib/input-change-events";
import logging from "../../core/logging";
@@ -46,7 +47,7 @@ export default Base.extend({
data?.pattern === "sortable"
) {
// Directly submit when removing a clone or changing the sorting.
this.el.dispatchEvent(events.submit_event());
dom.find_form(this.el).dispatchEvent(events.submit_event());
log.debug(
`triggered by pat-update, pattern: ${data.pattern}, action: ${data.action}`
);
@@ -128,7 +129,9 @@ export default Base.extend({

onInputChange(e) {
e.stopPropagation();
this.el.dispatchEvent(events.submit_event({ submitter: e.target }));
dom.find_form(this.el).dispatchEvent(
events.submit_event({ submitter: e.target })
);
log.debug(
`submit event triggered by event ${e.type} by submitter (1) on (2)`,
e.target,
37 changes: 25 additions & 12 deletions src/pat/auto-submit/auto-submit.test.js
Original file line number Diff line number Diff line change
@@ -82,17 +82,12 @@ describe("pat-autosubmit", function () {
`;
const input = document.querySelector(".pat-autosubmit");
new Pattern(input);
let submit_input_dispatched = false;
let submit_form_dispatched = false;
input.addEventListener("submit", () => {
submit_input_dispatched = true;
});
document.querySelector("form").addEventListener("submit", () => {
submit_form_dispatched = true;
});
input.dispatchEvent(events.input_event());
await utils.timeout(1);
expect(submit_input_dispatched).toBe(true);
expect(submit_form_dispatched).toBe(true);
});

@@ -179,23 +174,41 @@ describe("pat-autosubmit", function () {
`;
const input = document.querySelector(".pat-autosubmit");
new Pattern(input);
let submit_input_dispatched = false;
let submit_form_dispatched = false;
input.addEventListener("submit", () => {
submit_input_dispatched = true;
});
document.querySelector("form").addEventListener("submit", () => {
submit_form_dispatched = true;
});
input.dispatchEvent(events.input_event());
await utils.timeout(1);
expect(submit_input_dispatched).toBe(false);
expect(submit_form_dispatched).toBe(false);
await utils.timeout(9);
expect(submit_input_dispatched).toBe(false);
expect(submit_form_dispatched).toBe(false);
await utils.timeout(10);
expect(submit_input_dispatched).toBe(true);
expect(submit_form_dispatched).toBe(true);
});

it("2.6 - when pat-autosubmit is defined not on aform element", async function () {
document.body.innerHTML = `
<form>
<div
class="pat-autosubmit"
data-pat-autosubmit="delay: 0"
>
<input name="q">
</div>
</form>
`;
const input = document.querySelector("input");
const autosubmit = document.querySelector(".pat-autosubmit");
new Pattern(autosubmit);

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_form_dispatched).toBe(true);
});
});
15 changes: 9 additions & 6 deletions src/pat/auto-suggest/auto-suggest.test.js
Original file line number Diff line number Diff line change
@@ -428,17 +428,20 @@ describe("pat-autosuggest", function () {
describe("4 - Integration...", function () {
it("4.1 - Works with pat-auto-submit", async function () {
document.body.innerHTML = `
<input
type="text"
class="pat-autosuggest pat-autosubmit"
data-pat-autosuggest="words: apple, orange, pear"
data-pat-autosubmit="delay:0" />
<form>
<input
type="text"
class="pat-autosuggest pat-autosubmit"
data-pat-autosuggest="words: apple, orange, pear"
data-pat-autosubmit="delay:0" />
</form>
`;

const pattern_autosubmit = (await import("../auto-submit/auto-submit")).default; // prettier-ignore
const input = document.querySelector("input");

let submit_dispatched = false;
input.addEventListener("submit", () => {
document.querySelector("form").addEventListener("submit", () => {
submit_dispatched = true;
});

0 comments on commit a2530f3

Please sign in to comment.