Skip to content

fix: support custom focus targets in DateRangePicker - #10604

Open
ZedingZhang wants to merge 1 commit into
adobe:mainfrom
ZedingZhang:fix/5766-date-range-picker-focus-target
Open

ZedingZhang wants to merge 1 commit into
adobe:mainfrom
ZedingZhang:fix/5766-date-range-picker-focus-target

Conversation

@ZedingZhang

@ZedingZhang ZedingZhang commented Sep 15, 2026

Copy link
Copy Markdown
Contributor

Closes #5766

DateRangePicker focus handlers currently default their event target to Element, which makes them incompatible with form libraries whose handlers use FocusEvent<HTMLElement>. This change allows consumers to provide a focus event target type while retaining Element as the default for backward compatibility.

The target generic is propagated only through the types required by DateRangePicker: the shared stately date picker base, range picker state options, useDateRangePicker, and the React Aria Components DateRangePicker. DateField, DatePicker, and the Spectrum component APIs remain unchanged. A type regression test covers spreading form-style onFocus and onBlur handlers that target HTMLElement into DateRangePicker.

This change was developed with assistance from Codex. I reviewed and understand every change and
remain responsible for this contribution.

✅ Pull Request Checklist:

  • Included link to corresponding React Spectrum GitHub Issue.
  • Added/updated unit tests and storybook for this change (for new code or code which already has tests). A TypeScript regression test was added; Storybook is not applicable because this is a type-only change.
  • Filled out test instructions.
  • Updated documentation (if it already exists for this component). No documentation changes are needed because the default API and runtime behavior are unchanged.
  • Looked at the Accessibility Practices for this feature - Aria Practices. Accessibility behavior is unchanged because this only refines TypeScript event target types.
  • I understand every change in this PR and can explain why it's there.
  • If AI-assisted, I followed our AI contribution guidance and pointed my assistant at CLAUDE.md.

📝 Test Instructions:

  1. Run yarn check-types.
  2. Verify that a DateRangePickerProps<DateValue, HTMLElement> object with onFocus and onBlur
    handlers typed as React.FocusEvent<HTMLElement> can be spread into <DateRangePicker />.
  3. Run the React Aria Components DateRangePicker and React Aria date picker Jest suites.

Automated checks run locally:

  • corepack yarn check-types
  • corepack yarn oxfmt --check on the five changed files
  • corepack yarn oxlint on the five changed files
  • corepack yarn test packages/react-aria-components/test/DateRangePicker.test.js packages/react-aria/test/datepicker/useDatePicker.test.tsx --runInBand (17 tests passed)

🧢 Your Project:

Personal/open-source contribution.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Allow providing generic FocusableProps type in DateRangePicker

1 participant