refactor(input-date-picker, input-number, input-time-picker): wire up useForm#14072
refactor(input-date-picker, input-number, input-time-picker): wire up useForm#14072
useForm#14072Conversation
useFormuseForm
There was a problem hiding this comment.
Pull request overview
This PR migrates input-date-picker, input-number, and input-time-picker from the legacy hidden-input form utilities to the ElementInternals-based useForm controller as part of the broader form-associated refactor tracked in #8126.
Changes:
- Refactored form association logic in
input-date-picker,input-number, andinput-time-pickerto useuseForm(ElementInternals) and removed the legacyHiddenFormInputSlot/connectFormwiring. - Updated Enter-key submission behavior to use
formSupport.requestSubmit()when form-associated. - Moved “form-associated” testing from Puppeteer e2e specs into Vitest browser e2e specs for the updated components.
Reviewed changes
Copilot reviewed 9 out of 9 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| packages/components/src/components/input-time-picker/input-time-picker.tsx | Replaces legacy form utilities/hidden input slot with useForm controller integration. |
| packages/components/src/components/input-time-picker/input-time-picker.e2e.ts | Removes Puppeteer form-associated coverage for this component. |
| packages/components/src/components/input-time-picker/input-time-picker.browser.e2e.tsx | Adds browser-mode form-associated coverage for this component. |
| packages/components/src/components/input-number/input-number.tsx | Replaces legacy form utilities/hidden input slot with useForm controller integration. |
| packages/components/src/components/input-number/input-number.e2e.ts | Removes Puppeteer form-associated and hidden-input syncing coverage for this component. |
| packages/components/src/components/input-number/input-number.browser.e2e.tsx | Adds browser-mode form-associated coverage for this component. |
| packages/components/src/components/input-date-picker/input-date-picker.tsx | Replaces legacy form utilities/hidden input slot with useForm controller integration. |
| packages/components/src/components/input-date-picker/input-date-picker.e2e.ts | Removes Puppeteer form-associated coverage for this component. |
| packages/components/src/components/input-date-picker/input-date-picker.browser.e2e.tsx | Adds browser-mode form-associated coverage (single + range) for this component. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| this.formSupport.requestSubmit(); | ||
| this.restoreInputFocus(true); |
There was a problem hiding this comment.
requestSubmit() will synchronously run constraint validation and typically focuses the first invalid control in the form. Because restoreInputFocus(true) runs immediately after requestSubmit(), it can steal focus back to the date-picker even when some other control is invalid, which is a behavioral change from the legacy submitForm() helper (it re-focused the invalid control on the next frame). Consider only restoring focus when the submission is actually valid/succeeds, or otherwise deferring/conditioning the focus restoration so it doesn't override the browser's invalid-control focusing behavior.
| this.formSupport.requestSubmit(); | |
| this.restoreInputFocus(true); | |
| const form = (this.formSupport as { form?: HTMLFormElement | null }).form ?? null; | |
| const isValid = !form || form.checkValidity(); | |
| this.formSupport.requestSubmit(); | |
| if (isValid) { | |
| this.restoreInputFocus(true); | |
| } |
Related Issue: #8126
Summary
This PR refactors
input-date-picker,input-number, andinput-time-pickercomponents' form association logic from the legacy form utilities to theuseFormcontroller.