Repository navigation
fix(react-calendar-preview): preserve popup focus and compat geometry - #36917
Merged
Dmytro Kirpa (dmytrokirpa) merged 3 commits intoOct 19, 2026
Merged
Conversation
Forward native FocusOptions through picker handles and restore compat picker and action dimensions. Cover focus forwarding and exact five/six-week LTR/RTL layout geometry. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
📊 Bundle size report
🤖 This report was generated against 9a3ba2066d273a030b34e1e5e511b8c82be7b95f |
This was referenced Oct 18, 2026
|
Pull request demo site: URL |
…cancellation Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Dmytro Kirpa (dmytrokirpa)
marked this pull request as ready for review
October 19, 2026 08:12
Dmytro Kirpa (dmytrokirpa)
requested a review
from Paul Mardling (PaulGMardling)
October 19, 2026 08:12
Dmytro Kirpa (dmytrokirpa)
enabled auto-merge (squash)
October 19, 2026 08:22
Contributor
There was a problem hiding this comment.
🟢 Approval recommended
Static review found no blocking implementation defects, with targeted regression coverage supporting the changes; validation was not rerun.
1 open issue
What changed in this PR
Updates Calendar Preview focus handling, sizing, and keyboard callbacks ahead of the DatePicker stack.
Changes:
- Forward native focus options through picker handles.
- Match compat layout and action dimensions.
- Correct keyboard selection callback ordering and add regression coverage, documentation, and patch entries.
| File | Description |
|---|---|
| packages/react-components/react-calendar-preview/library/src/utils/calendarDimensions.ts | Shared grid widths. |
| packages/react-components/react-calendar-preview/library/src/hooks/useCalendarPickerStyles.styles.ts | Reuse shared width. |
| packages/react-components/react-calendar-preview/library/src/components/CalendarYearGridCell/useCalendarYearGridCell.ts | Reorder selection callback. |
| packages/react-components/react-calendar-preview/library/src/components/CalendarYear/useCalendarYear.tsx | Forward focus options. |
| packages/react-components/react-calendar-preview/library/src/components/CalendarYear/CalendarYear.types.ts | Extend focus handle. |
| packages/react-components/react-calendar-preview/library/src/components/CalendarYear/CalendarYear.test.tsx | Test focus forwarding. |
| packages/react-components/react-calendar-preview/library/src/components/CalendarMonthGridCell/useCalendarMonthGridCell.ts | Reorder selection callback. |
| packages/react-components/react-calendar-preview/library/src/components/CalendarMonth/useCalendarMonth.tsx | Forward focus options. |
| packages/react-components/react-calendar-preview/library/src/components/CalendarMonth/CalendarMonth.types.ts | Extend focus handle. |
| packages/react-components/react-calendar-preview/library/src/components/CalendarMonth/CalendarMonth.test.tsx | Test both picker views. |
| packages/react-components/react-calendar-preview/library/src/components/CalendarDayGridCell/useCalendarDayGridCell.ts | Reorder keyboard selection. |
| packages/react-components/react-calendar-preview/library/src/components/CalendarDay/useCalendarDayStyles.styles.ts | Reuse shared widths. |
| packages/react-components/react-calendar-preview/library/src/components/CalendarDay/useCalendarDay.tsx | Update focus and callback ordering. |
| packages/react-components/react-calendar-preview/library/src/components/CalendarDay/CalendarDay.types.ts | Extend focus handle. |
| packages/react-components/react-calendar-preview/library/src/components/CalendarDay/CalendarDay.test.tsx | Test focus forwarding. |
| packages/react-components/react-calendar-preview/library/src/components/Calendar/useCalendarStyles.styles.ts | Align compat geometry. |
| packages/react-components/react-calendar-preview/library/src/components/Calendar/useCalendar.tsx | Reorder today-action callback. |
| packages/react-components/react-calendar-preview/library/src/components/Calendar/Calendar.test.tsx | Test keyboard callback ordering. |
| packages/react-components/react-calendar-preview/library/src/components/Calendar/Calendar.cy.tsx | Add geometry regression cases. |
| packages/react-components/react-calendar-preview/library/README.md | Document updated behavior. |
| packages/react-components/react-calendar-preview/library/etc/react-calendar-preview.api.md | Update public focus signatures. |
| change/@fluentui-react-calendar-preview-987737e5-9b81-4989-bd70-c79b4d70225b.json | Focus-options patch entry. |
| change/@fluentui-react-calendar-preview-55b038b4-d20a-4a69-9030-e18fee6e601d.json | Keyboard-ordering patch entry. |
| change/@fluentui-react-calendar-preview-32caec0e-a7b4-4fb4-b487-d151db303d1e.json | Geometry patch entry. |
Review effort: Balanced
Paul Mardling (PaulGMardling)
approved these changes
Oct 19, 2026
Paul Mardling (PaulGMardling)
left a comment
Paul Mardling (PaulGMardling)
left a comment
Contributor
There was a problem hiding this comment.
It looks good,
Just need to clean up the copilot suggestion and the change files, otherwise it looks like a nice job tidying up some logic to squash some bugs
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.
Previous Behavior
Calendar picker focus handles cannot forward native focus options. Focusing a picker inside a positioned popup can scroll its host and trigger outside-scroll dismissal.
Calendar Preview's intrinsic root width includes the divider in addition to both picker footprints. Its "Go to today" action also contributes one extra pixel of height compared with Calendar Compat.
Keyboard activation also prevents the native event before notifying selection/action callbacks.
DatePicker then mistakes a valid keyboard selection for a consumer-canceled event.
New Behavior
FocusOptionsthrough CalendarDay, CalendarMonth, and CalendarYear focus handles. Calls without options retain browser-default behavior.This is an independent prerequisite for the DatePicker stack beginning at #36914. It is intentionally outside that GitHub PR stack and should merge first.
Validation
Executed in the original workspace before splitting these identical Calendar changes:
NX_DAEMON=false yarn nx run-many -t test -p react-calendar-preview react-datepicker-preview --runInBand --skipNxCache— passed: 703 Calendar tests and 111 DatePicker tests.NX_DAEMON=false yarn nx run react-calendar-preview:e2e --excludeTaskDependencies --browser chrome --config retries=0 --spec src/components/Calendar/Calendar.cy.tsx --skipNxCache— passed: 80 browser tests.NX_DAEMON=false yarn nx run react-datepicker-preview:e2e --excludeTaskDependencies --browser chrome --config retries=0 --skipNxCache— passed: 14 browser tests.NX_DAEMON=false yarn nx run-many -t type-check lint -p react-calendar-preview --excludeTaskDependencies --skipNxCache— passed.NX_DAEMON=false yarn nx run-many -t build -p react-calendar-preview react-datepicker-preview --excludeTaskDependencies --parallel=1 --skipNxCache— passed, including API extraction.git diff --cached --check— passed.yarn beachball change.NX_DAEMON=false yarn nx run react-calendar-preview:test --runInBand --skipNxCache— passed: 706 tests across 19 suites.NX_DAEMON=false yarn nx run react-datepicker-preview:e2e --excludeTaskDependencies --browser chrome --config retries=0 --spec src/components/DatePicker/DatePicker.cy.tsx --skipNxCache— passed: 14 styled DatePicker Chrome tests after the keyboard fix.NX_DAEMON=false yarn nx run react-headless-components-preview:e2e --excludeTaskDependencies --browser chrome --config retries=0 --spec src/components/DatePicker/DatePicker.cy.tsx --skipNxCache— passed: 10 integration tests against the pending headless Calendar and DatePicker branches, including keyboard/day/month-only selection.NX_DAEMON=false yarn nx run react-calendar-preview:lint --command='yarn run -T eslint src/components/Calendar/Calendar.test.tsx src/components/Calendar/useCalendar.tsx src/components/CalendarDay/useCalendarDay.tsx src/components/CalendarDayGridCell/useCalendarDayGridCell.ts src/components/CalendarMonthGridCell/useCalendarMonthGridCell.ts src/components/CalendarYearGridCell/useCalendarYearGridCell.ts' --skipNxCache— passed.Related Issue(s)