28 lines
702 B
JavaScript
28 lines
702 B
JavaScript
|
/**
|
||
|
|
* AutoSubmitForm web component
|
||
|
|
*
|
||
|
|
* Generic progressive enhancement for forms that should auto-submit on change:
|
||
|
|
* - Listens for `change` events on descendant form inputs
|
||
|
|
* - Calls `requestSubmit()` on the nearest `<form>`
|
||
|
|
* - Exposes `:state(auto-loading)` to hide fallback submit buttons via CSS
|
||
|
|
*/
|
||
|
|
class AutoSubmitForm extends HTMLElement {
|
||
|
|
#internals;
|
||
|
|
|
||
|
|
constructor() {
|
||
|
|
super();
|
||
|
|
this.#internals = this.attachInternals();
|
||
|
|
}
|
||
|
|
|
||
|
|
connectedCallback() {
|
||
|
|
this.addEventListener("change", this.#handleChange);
|
||
|
|
this.#internals.states.add("auto-loading");
|
||
|
|
}
|
||
|
|
|
||
|
|
#handleChange(e) {
|
||
|
|
e.target.closest("form")?.requestSubmit();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
customElements.define("auto-submit-form", AutoSubmitForm);
|