Skip to content

fix: allow keyboard navigation into month-picker boundary months - #6319

Open
nninyeong wants to merge 2 commits into
Hacker0x01:mainfrom
nninyeong:fix/monthpicker-keyboard-boundaries
Open

fix: allow keyboard navigation into month-picker boundary months#6319
nninyeong wants to merge 2 commits into
Hacker0x01:mainfrom
nninyeong:fix/monthpicker-keyboard-boundaries

Conversation

@nninyeong

Copy link
Copy Markdown

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:

    • Mid-month minimum and maximum boundaries.
    • Keyboard navigation into both boundary months.
    • Consecutive navigation after entering a boundary month.
    • Alignment between DOM focus, preSelection, and the keyboard-selected month.

Screenshots

The recording below compares the same keyboard interaction before and after the fix.

before
  • Before: the enabled boundary month cannot be reached using an arrow key.
after
  • After: the boundary month is reachable, and DOM focus remains aligned with the keyboard-selected month during consecutive navigation.

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

  • I have followed the contributing guidelines.
  • I have added sufficient test coverage for my changes.
  • I have formatted my code with Prettier and checked for linting issues with ESLint for code readability.

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant