fix: allow keyboard navigation into month-picker boundary months - #6319
Open
nninyeong wants to merge 2 commits into
Open
fix: allow keyboard navigation into month-picker boundary months#6319nninyeong wants to merge 2 commits into
nninyeong wants to merge 2 commits into
Conversation
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.
Description
Linked issue: None
Problem
When showMonthYearPicker is used, a boundary month can be rendered as enabled and selectable but still be unreachable using arrow-key navigation when minDate or maxDate falls within that month.
For example:
With minDate={January 31}, January is enabled because it contains a selectable date, but it cannot be reached by pressing ArrowLeft while February is selected.
With maxDate={December 1}, December is enabled because it contains a selectable date, but it cannot be reached by pressing ArrowRight while November is selected.
This happened because month rendering and selection treated availability at month granularity, while keyboard navigation compared a day-preserving candidate against the raw date boundary. For example, navigating left from February 15 calculated January 15, which was rejected as being before minDate={January 31}. Likewise, navigating right from November 15 calculated December 15, which was rejected as being after maxDate={December 1}.
After making the boundary month reachable, another part of the same inconsistency became observable: DatePicker.setPreSelection still validated the candidate at day granularity. DOM focus could move to the boundary month while the new preSelection was rejected. Subsequent arrow-key presses then used the stale preSelection to calculate the next date, causing the keyboard highlight and focus ring to point to different months.
Changes
Normalize minDate to the start of its month and maxDate to the end of its month when checking whether a month is disabled.
Use the same month-level boundaries when calculating month-picker keyboard navigation.
Validate preSelection at month granularity when showMonthYearPicker is enabled.
Preserve the existing day-level preSelection validation for other picker modes.
Add regression tests covering:
Screenshots
The recording below compares the same keyboard interaction before and after the fix.
To reviewers
The intended invariant is that an enabled and selectable month must also be reachable by keyboard, and the focused month must remain aligned with preSelection.
The setPreSelection change is limited to showMonthYearPicker. Day, week, quarter, and year picker validation remains unchanged. Only minDate and maxDate participate in the new month-level pre-selection check, so existing include/exclude and filtering behavior is preserved.
Contribution checklist