Skip to content

Commit 993e8d8

Browse files
thetthet
authored
Merge pull request #1184 from Patternslib/fix-auto-submit
Various pat-autosubmit fixes and improvements.
2 parents c56dbc2 + 90b1fbc commit 993e8d8

File tree

5 files changed

+110
-30
lines changed

5 files changed

+110
-30
lines changed

‎src/core/events.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -167,6 +167,20 @@ const await_pattern_init = (pattern) => {
167167
* Event factories
168168
*/
169169

170+
/** Generic event factory.
171+
*
172+
* A event factory for a bubbling and cancelable generic event.
173+
*
174+
* @param {string} name - The event name.
175+
* @returns {Event} - Returns a blur event.
176+
*/
177+
const generic_event = (name) => {
178+
return new Event(name, {
179+
bubbles: true,
180+
cancelable: true,
181+
});
182+
};
183+
170184
const blur_event = () => {
171185
return new Event("blur", {
172186
bubbles: false,
@@ -249,6 +263,7 @@ export default {
249263
remove_event_listener: remove_event_listener,
250264
await_event: await_event,
251265
await_pattern_init: await_pattern_init,
266+
generic_event: generic_event,
252267
blur_event: blur_event,
253268
click_event: click_event,
254269
change_event: change_event,

‎src/core/events.test.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -457,6 +457,16 @@ describe("core.events tests", () => {
457457
inner = el.querySelector("#inner");
458458
});
459459

460+
it("generic event", async () => {
461+
const name = "fantasy_event";
462+
outer.addEventListener(name, () => {
463+
catched = "outer";
464+
});
465+
inner.dispatchEvent(events.generic_event(name));
466+
await utils.timeout(1);
467+
expect(catched).toBe("outer");
468+
});
469+
460470
it("blur event", async () => {
461471
outer.addEventListener("blur", () => {
462472
catched = "outer";

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

Lines changed: 22 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -31,8 +31,10 @@ export default Base.extend({
3131
},
3232

3333
registerListeners() {
34-
this.$el.on(
35-
"input-change-delayed.pat-autosubmit",
34+
events.add_event_listener(
35+
this.el,
36+
"input-change-delayed",
37+
"pat-autosubmit--input-change-delayed",
3638
this.onInputChange.bind(this)
3739
);
3840
this.registerSubformListeners();
@@ -44,7 +46,7 @@ export default Base.extend({
4446
data?.pattern === "sortable"
4547
) {
4648
// Directly submit when removing a clone or changing the sorting.
47-
this.$el.submit();
49+
this.el.dispatchEvent(events.submit_event());
4850
log.debug(
4951
`triggered by pat-update, pattern: ${data.pattern}, action: ${data.action}`
5052
);
@@ -60,15 +62,21 @@ export default Base.extend({
6062
* that only the subform gets submitted if an element inside it
6163
* changes.
6264
*/
63-
const $el = typeof ev !== "undefined" ? $(ev.target) : this.$el;
64-
$el.find(".pat-subform")
65-
.not(".pat-autosubmit")
66-
.each((idx, el) => {
67-
$(el).on(
68-
"input-change-delayed.pat-autosubmit",
69-
this.onInputChange.bind(this)
70-
);
71-
});
65+
const el = typeof ev !== "undefined" ? ev.target : this.el;
66+
67+
// get all subforms whice are not yet auto submit forms.
68+
const subforms = el.querySelectorAll(
69+
".pat-autosubmit:not(.pat-autosubmit):not(.pat-auto-submit)"
70+
);
71+
for (const subform of subforms) {
72+
// register autosubmit on subform
73+
events.add_event_listener(
74+
subform,
75+
"input-change-delayed",
76+
"pat-autosubmit--input-change-delayed",
77+
this.onInputChange.bind(this)
78+
);
79+
}
7280
},
7381

7482
refreshListeners(ev, cfg, el, injected) {
@@ -87,10 +95,10 @@ export default Base.extend({
8795
}
8896

8997
function trigger_event(ev) {
90-
if ($(ev.target).closest(".pat-autosubmit")[0] !== this) {
98+
if (ev.target.closest(".pat-autosubmit") !== this) {
9199
return;
92100
}
93-
$(ev.target).trigger("input-change-delayed");
101+
ev.target.dispatchEvent(events.generic_event("input-change-delayed"));
94102
}
95103
if (this.options.delay === "defocus") {
96104
this.$el.on("input-defocus.pat-autosubmit", trigger_event);

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

Lines changed: 53 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -134,10 +134,17 @@ describe("pat-autosubmit", function () {
134134
</form>
135135
`;
136136
const el = document.querySelector(".pat-autosubmit");
137-
const instance = new Pattern(el);
138-
const spy = jest.spyOn(instance.$el, "submit");
137+
138+
let submit_dispatched = false;
139+
el.addEventListener("submit", () => {
140+
submit_dispatched = true;
141+
});
142+
143+
new Pattern(el);
144+
139145
$(el).trigger("pat-update", { pattern: "clone", action: "removed" });
140-
expect(spy).toHaveBeenCalled();
146+
147+
expect(submit_dispatched).toBe(true);
141148
});
142149

143150
it("2.4 - when pat-sortable changes the sorting", function () {
@@ -146,10 +153,50 @@ describe("pat-autosubmit", function () {
146153
</form>
147154
`;
148155
const el = document.querySelector(".pat-autosubmit");
149-
const instance = new Pattern(el);
150-
const spy = jest.spyOn(instance.$el, "submit");
156+
157+
let submit_dispatched = false;
158+
el.addEventListener("submit", () => {
159+
submit_dispatched = true;
160+
});
161+
162+
new Pattern(el);
163+
151164
$(el).trigger("pat-update", { pattern: "sortable" });
152-
expect(spy).toHaveBeenCalled();
165+
166+
expect(submit_dispatched).toBe(true);
167+
});
168+
169+
it("2.5 - when a change on a single input happens with delay option", async function () {
170+
document.body.innerHTML = `
171+
<form>
172+
<input
173+
class="pat-autosubmit"
174+
type="text"
175+
name="q"
176+
data-pat-autosubmit="delay: 20"
177+
/>
178+
</form>
179+
`;
180+
const input = document.querySelector(".pat-autosubmit");
181+
new Pattern(input);
182+
let submit_input_dispatched = false;
183+
let submit_form_dispatched = false;
184+
input.addEventListener("submit", () => {
185+
submit_input_dispatched = true;
186+
});
187+
document.querySelector("form").addEventListener("submit", () => {
188+
submit_form_dispatched = true;
189+
});
190+
input.dispatchEvent(events.input_event());
191+
await utils.timeout(1);
192+
expect(submit_input_dispatched).toBe(false);
193+
expect(submit_form_dispatched).toBe(false);
194+
await utils.timeout(9);
195+
expect(submit_input_dispatched).toBe(false);
196+
expect(submit_form_dispatched).toBe(false);
197+
await utils.timeout(10);
198+
expect(submit_input_dispatched).toBe(true);
199+
expect(submit_form_dispatched).toBe(true);
153200
});
154201
});
155202

‎src/pat/auto-submit/index.html‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -110,19 +110,19 @@ <h2>pat-autosubmit on form with default options</h2>
110110
</label>
111111
</fieldset>
112112

113-
<fieldset class="group">
113+
<fieldset
114+
class="group pat-sortable pat-clone"
115+
data-pat-clone="template: #clone-item-template; trigger-element: #add-clone-item"
116+
data-pat-sortable="selector: .sortable-item"
117+
>
114118
<legend>example with pat-clone and pat-sortable</legend>
115-
116-
<ul class="pat-sortable pat-clone"
117-
data-pat-clone="template: #clone-item-template; trigger-element: #add-clone-item"
118-
data-pat-sortable="selector: .sortable-item">
119-
120-
<li class="sortable-item" id="clone-item-template" hidden>
119+
<button type="button" id="add-clone-item">Add clone item</button>
120+
<template id="clone-item-template">
121+
<label class="sortable-item">
121122
<input type="text" name="pat-clone-example"/>
122123
<button type="button" class="remove-clone">x</button>
123-
</li>
124-
</ul>
125-
<button type="button" id="add-clone-item">Add clone item</button>
124+
</label>
125+
</template>
126126
</fieldset>
127127

128128
</fieldset>

0 commit comments

Comments
 (0)