Keep focus in the grid when a controlled month change removes the focused day - #3012
Closed
raphyabak wants to merge 2 commits into
Closed
Keep focus in the grid when a controlled month change removes the focused day#3012raphyabak wants to merge 2 commits into
raphyabak wants to merge 2 commits into
Conversation
…used day Fixes gpbl#3009. When the month prop changes under external control (e.g. after undoing a selection changes both month and selected), the previously focused day can be removed from the DOM. useFocus's focusedDay state kept referring to that removed day, so no day had the "focused" modifier after the update, DayButton never called .focus() on anything, and focus fell back to <body>, breaking keyboard continuity. Add an effect that detects when focusedDay is no longer among the displayed days and moves focus to calculateFocusTarget's result instead, which already prioritizes the selected day, then today, then falls back to the first focusable day. Focus is left alone when it wasn't in the grid to begin with.
🦋 Changeset detectedLatest commit: dce26e1 The changes in this PR will be included in the next version bump. This PR includes changesets to release 7 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
Author
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
1 participant
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.
Summary
Fixes #3009.
When the
monthprop changes under external control (e.g. an app updates bothmonthandselectedtogether, such as after undoing a date selection), the previously focused day can be removed from the DOM entirely.useFocus'sfocusedDaystate kept referring to that removed day, so no day had thefocusedmodifier after the update,DayButtonnever called.focus()on anything, and focus silently fell back to<body>— breaking keyboard continuity (arrow keys stop moving between days) for any controlled calendar whose value can change externally.Fix
Added an effect in
useFocusthat detects whenfocusedDayis no longer among the currently displayedcalendar.daysand moves focus tocalculateFocusTarget's result instead — the same helper already used forautoFocus, which prioritizes the selected day, then today, then the first focusable day. Focus is left untouched when it wasn't in the grid to begin with, per the issue's expected behavior.Test plan
DayPicker.test.tsx:month+selectedupdate (withonSelectwired up, so the selection is genuinely controlled): asserts focus lands on the newly selected day rather than<body>.<body>(i.e. the fix doesn't grab focus that wasn't in the grid).document.activeElementon<body>— exactly the reported bug.npx jest packages/react-day-picker— 492 passing.biome checkandtsc --noEmitboth pass on the changed files.