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.
  • Loading branch information
thet committed Nov 9, 2023
1 parent 01b348d commit a2530f3
Show file tree
Hide file tree
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";
Expand Down Expand Up @@ -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}`
);
Expand Down Expand Up @@ -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,
Expand Down
37 changes: 25 additions & 12 deletions src/pat/auto-submit/auto-submit.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
});

Expand Down Expand Up @@ -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);
});
});
Expand Down
15 changes: 9 additions & 6 deletions src/pat/auto-suggest/auto-suggest.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
});

Expand Down

0 comments on commit a2530f3

Please sign in to comment.