diff --git a/app/javascript/controllers/auto_submit_form_controller.js b/app/javascript/controllers/auto_submit_form_controller.js index 18744c4d..cf4be4e8 100644 --- a/app/javascript/controllers/auto_submit_form_controller.js +++ b/app/javascript/controllers/auto_submit_form_controller.js @@ -10,16 +10,14 @@ export default class extends Controller { connect() { this.autoTargets.forEach((element) => { - const event = - element.dataset.autosubmitTriggerEvent || this.triggerEventValue; + const event = this.#getTriggerEvent(element); element.addEventListener(event, this.handleInput); }); } disconnect() { this.autoTargets.forEach((element) => { - const event = - element.dataset.autosubmitTriggerEvent || this.triggerEventValue; + const event = this.#getTriggerEvent(element); element.removeEventListener(event, this.handleInput); }); } @@ -33,6 +31,50 @@ export default class extends Controller { }, this.#debounceTimeout(target)); }; + #getTriggerEvent(element) { + // Check if element has explicit trigger event set + if (element.dataset.autosubmitTriggerEvent) { + return element.dataset.autosubmitTriggerEvent; + } + + // Check if form has explicit trigger event set + if (this.triggerEventValue !== "input") { + return this.triggerEventValue; + } + + // Otherwise, choose trigger event based on element type + const type = element.type || element.tagName; + + switch (type.toLowerCase()) { + case "text": + case "email": + case "password": + case "search": + case "tel": + case "url": + case "textarea": + return "blur"; + case "number": + case "date": + case "datetime-local": + case "month": + case "time": + case "week": + case "color": + return "change"; + case "checkbox": + case "radio": + case "select": + case "select-one": + case "select-multiple": + return "change"; + case "range": + return "input"; + default: + return "blur"; + } + } + #debounceTimeout(element) { if (element.dataset.autosubmitDebounceTimeout) { return Number.parseInt(element.dataset.autosubmitDebounceTimeout);