js/shoelace
1
0
Fork 0
mirror of https://github.com/shoelace-style/shoelace.git synced 2026-01-12 02:59:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

revert capturing due to inconsistent behavior; #718

Browse Source
This commit is contained in:
Cory LaViska
2022-04-08 10:25:43 -04:00
parent 9f844a8b91
commit 7467806969
2 changed files with 6 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
docs/getting-started/form-controls.md
View File

@@ -6,11 +6,9 @@ Shoelace solves this problem by using the [`formdata`](https://developer.mozilla
?> If you're using an older browser that doesn't support the `formdata` event, a lightweight polyfill will be automatically applied to ensure forms submit as expected.
## A Note About Event Capturing
## A Note About Event Handling
Shoelace uses event listeners to intercept the form's `formdata` and `submit` events. This allows it to inject form data and activate client-side validation as necessary. The [`capture`](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#parameters) option is used to ensure events are intercepted as early as possible. This means if you're using `addEventListener()` without the `capture` option, you have nothing to worry about.
However, if you're using the `capture` option, you must attach the listener _after_ Shoelace form controls are connected to the DOM. Otherwise, your logic will run before Shoelace has a chance to inject form data and validate form controls.
Shoelace uses event listeners to intercept the form's `formdata` and `submit` events. This allows it to inject form data and activate client-side validation as necessary. If you're also using an event listener, this means _you must attach the listener after Shoelace form controls are connected to the DOM_. Otherwise, your logic will run before Shoelace has a chance to inject form data and validate form controls.
## Form Serialization

11
src/internal/form.ts
View File

@@ -43,18 +43,15 @@ export class FormSubmitController implements ReactiveController {
this.form = this.options.form(this.host);
if (this.form) {
// We use capturing to bump the order of events up. This doesn't guarantee our logic runs first, but it will run
// before normal event listeners which accounts for most use cases. People using capture will need to ensure the
// form controls are connected before attaching their listeners.
this.form.addEventListener('formdata', this.handleFormData, { capture: true });
this.form.addEventListener('submit', this.handleFormSubmit, { capture: true });
this.form.addEventListener('formdata', this.handleFormData);
this.form.addEventListener('submit', this.handleFormSubmit);
}
}
hostDisconnected() {
if (this.form) {
this.form.removeEventListener('formdata', this.handleFormData, { capture: true });
this.form.removeEventListener('submit', this.handleFormSubmit, { capture: true });
this.form.removeEventListener('formdata', this.handleFormData);
this.form.removeEventListener('submit', this.handleFormSubmit);
this.form = undefined;
}
}