diff --git a/docs/getting-started/form-controls.md b/docs/getting-started/form-controls.md index 1abfbbf66..8aa1eb8d8 100644 --- a/docs/getting-started/form-controls.md +++ b/docs/getting-started/form-controls.md @@ -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 diff --git a/src/internal/form.ts b/src/internal/form.ts index c7b01c42e..8596ee84a 100644 --- a/src/internal/form.ts +++ b/src/internal/form.ts @@ -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; } }