Skip to content

refactor(input-date-picker, input-number, input-time-picker): wire up useForm#14072

Draft
jcfranco wants to merge 3 commits intodevfrom
jcfranco/8126-use-element-internals-part-2
Draft

refactor(input-date-picker, input-number, input-time-picker): wire up useForm#14072
jcfranco wants to merge 3 commits intodevfrom
jcfranco/8126-use-element-internals-part-2

Conversation

@jcfranco
Copy link
Member

@jcfranco jcfranco commented Mar 12, 2026

Related Issue: #8126

Summary

This PR refactors input-date-picker, input-number, and input-time-picker components' form association logic from the legacy form utilities to the useForm controller.

@github-actions github-actions bot added the refactor Issues tied to code that needs to be significantly reworked. label Mar 12, 2026
@jcfranco jcfranco changed the title refactor(input-number): wire up useForm refactor(input-date-picker, input-number, input-time-picker): wire up useForm Mar 12, 2026
@jcfranco jcfranco requested a review from Copilot March 12, 2026 01:34
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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, and input-time-picker to use useForm (ElementInternals) and removed the legacy HiddenFormInputSlot/connectForm wiring.
  • 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.

Comment on lines +777 to 778
this.formSupport.requestSubmit();
this.restoreInputFocus(true);
Copy link

Copilot AI Mar 12, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Suggested change
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);
}

Copilot uses AI. Check for mistakes.
@jcfranco jcfranco requested a review from eriklharper March 12, 2026 17:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

refactor Issues tied to code that needs to be significantly reworked.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants