Repository navigation
fix(RangeCalendar): keep the anchor date when focus moves into a month or year picker popover - #10890
Open
costajohnt wants to merge 1 commit into
Open
costajohnt wants to merge 1 commit into
costajohnt wants to merge 1 commit into
Conversation
…h or year picker popover Opening a CalendarMonthPicker or CalendarYearPicker popover moved focus out of the calendar's DOM, so the blur handler committed the in-progress range as start = end (and closed a DateRangePicker). Ignore blurs that bubble through portals and focus moving from an expanded trigger into its popup.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #10881
After picking a start date in a
RangeCalendar, opening aCalendarMonthPickerorCalendarYearPickerrendered as aSelectcommitted the range as start = end. Inside aDateRangePickerthat commit also closed the popover, so a range could not span months through the pickers.The commit came from the
onBlurhandler inuseRangeCalendar, which runscommitBehaviorwhenever focus leaves the calendar's DOM. The picker's popover is portaled, so two blurs looked like leaving the calendar:targetandrelatedTargetoutside its DOM.The handler now returns early for both: when the blur target is not inside the calendar (the same portal check
useFocusWithinuses), and when the target is an expanded trigger (aria-expanded="true"). Tabbing away, clicking outside, and thepointeruppath behave as before. When the popover closes, focus returns to the trigger inside the calendar, so leaving the calendar afterwards still commits.One tradeoff: if an app puts a non-modal disclosure-style button inside the calendar and the user tabs out of the calendar while it is still expanded, the range is no longer committed on that blur (the anchor stays and the next click still completes the range). RAC's
Selectpopover is modal, so this does not apply to the picker pattern in the docs.✅ Pull Request Checklist:
Added a test in
RangeCalendar.test.tsxthat picks a start date, chooses June from aSelect-basedCalendarMonthPicker, and picks the end date. It fails onmain(onChangefires with Apr 8 to Apr 8 when the popover opens) and passes with this change. The calendar and date picker suites inreact-aria,react-aria-components,@adobe/react-spectrumand S2 pass, apart from fourCalendarDateTimetime-field tests in the v3DatePicker/DateRangePickersuites that fail the same way onmainlocally. Drafted with Claude Code; I reviewed the change and the tests myself.📝 Test Instructions:
DateRangePickerwith the same pickers: the popover should stay open after choosing the month and close once the end date is picked.🧢 Your Project:
Personal