[DateRangeCalendar] Support arrow navigation with multiple months rendered #16363

flaviendelangle · 2025-01-28T07:01:13Z

Extracted from #16175

In this PR

Arrow navigation
Support clean autoFocus

Not in this PR

No preview when doing keyboard editing
Start / end date switch is weird

Work

Move the focused day behavior from the DayCalendar component to the useCalendarState hook to be able to support multi month navigation. DayCalendar cannot be used as standalone so there is no problem doing that.
Merge the changeMonth, changeFocusedDay and handleMonthChange method into a single setVisibleDate method that updates the focused day, and the current month if it changes.

mui-bot · 2025-01-28T07:04:52Z

Deploy preview: https://deploy-preview-16363--material-ui-x.netlify.app/

Generated by 🚫 dangerJS against 8c2697f

flaviendelangle · 2025-01-29T14:48:43Z

packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.tsx

@@ -183,8 +183,8 @@ const PickersCalendarHeader = React.forwardRef(function PickersCalendarHeader(
    className: classes.switchViewIcon,
  });

-  const selectNextMonth = () => onMonthChange(utils.addMonths(month, 1), 'left');
-  const selectPreviousMonth = () => onMonthChange(utils.addMonths(month, -1), 'right');
+  const selectNextMonth = () => onMonthChange(utils.addMonths(month, 1));


Do you think I should count that as a breaking change?
Strictly speaking people can keep passing the param, it's just not used anymore and instead inferred by comparing the old and new month.

I'm not sure there is a need for a BC if it will not break anything on user land. 🤔

flaviendelangle · 2025-01-30T09:39:48Z

packages/x-date-pickers/src/DateCalendar/tests/DateCalendar.test.tsx

      fireEvent.click(screen.getByRole('gridcell', { name: '2' }));
-      expect(RenderCount.callCount - renderCountBeforeChange).to.equal(4); // 2 render * 2 days
+      // 2 render (one to update tabIndex + autoFocus, one to update selection) * 2 days * 2 (because dev mode)
+      expect(RenderCount.callCount - renderCountBeforeChange).to.equal(8);


There is no additional render caused by this PR.
On master, we don't focus in the test and we only have 4 renders, but it's not a realistic scenario, clicking always focused and with focus with have 8 render before and after the changes.

Makes sense. 👍

LukasTy

Great work!
Nice improvement and cleanup! 💙 💯

Here are some strange inconsistencies I noticed, but they can be left for separate issue as the behavior is currently like that as well. 🙈

The Focus on Date Range Calendar jumps to the day after navigating months, while on the regular Date Calendar the focus is not moved to the day.
I feel like the latter behavior is more correct. 🤔

P.S. For some reason the focus animation is stuck on the next button after navigation, while it is cleared on the previous button... 🤷

Screen.Recording.2025-01-31.at.15.46.41.mov

LukasTy · 2025-01-30T14:24:07Z

packages/x-date-pickers/src/PickersCalendarHeader/PickersCalendarHeader.tsx

@@ -183,8 +183,8 @@ const PickersCalendarHeader = React.forwardRef(function PickersCalendarHeader(
    className: classes.switchViewIcon,
  });

-  const selectNextMonth = () => onMonthChange(utils.addMonths(month, 1), 'left');
-  const selectPreviousMonth = () => onMonthChange(utils.addMonths(month, -1), 'right');
+  const selectNextMonth = () => onMonthChange(utils.addMonths(month, 1));


I'm not sure there is a need for a BC if it will not break anything on user land. 🤔

packages/x-date-pickers-pro/src/DateRangeCalendar/DateRangeCalendar.tsx

LukasTy · 2025-01-31T15:40:23Z

packages/x-date-pickers/src/DateCalendar/tests/DateCalendar.test.tsx

      fireEvent.click(screen.getByRole('gridcell', { name: '2' }));
-      expect(RenderCount.callCount - renderCountBeforeChange).to.equal(4); // 2 render * 2 days
+      // 2 render (one to update tabIndex + autoFocus, one to update selection) * 2 days * 2 (because dev mode)
+      expect(RenderCount.callCount - renderCountBeforeChange).to.equal(8);


Makes sense. 👍

flaviendelangle · 2025-02-03T07:33:48Z

The Focus on Date Range Calendar jumps to the day after navigating months, while on the regular Date Calendar the focus is not moved to the day.

I fixed it 👍
But the CI is broken (see https://mui-org.slack.com/archives/C02P87NQLJC/p1738561140312549)

…dered (mui#16363)

[DateRangeCalendar] Add proper keyboard navigation

07cf56b

flaviendelangle self-assigned this Jan 28, 2025

flaviendelangle added plan: Pro Impact at least one Pro user component: pickers This is the name of the generic UI component, not the React module! labels Jan 28, 2025

flaviendelangle mentioned this pull request Jan 28, 2025

[pickers] Move the opening logic to the range fields #16175

Merged

3 tasks

flaviendelangle added 2 commits January 28, 2025 08:23

Work

71fa5b2

Work

4148130

flaviendelangle force-pushed the date-range-calendar-keyboard branch from 143a0af to 4148130 Compare January 28, 2025 08:07

flaviendelangle added 2 commits January 28, 2025 13:25

Work

59f87f2

Work

e086759

flaviendelangle force-pushed the date-range-calendar-keyboard branch 2 times, most recently from 6f50b7e to e1bc77b Compare January 29, 2025 09:44

Fix

a0a095c

flaviendelangle force-pushed the date-range-calendar-keyboard branch from e1bc77b to a0a095c Compare January 29, 2025 10:07

flaviendelangle added 5 commits January 29, 2025 11:13

Merge branch 'master' into date-range-calendar-keyboard

a94cad8

Fix

0b0296f

Fix

2686194

Fi

85e9e54

Fix

734a9e2

flaviendelangle force-pushed the date-range-calendar-keyboard branch from 722e8f6 to 734a9e2 Compare January 29, 2025 12:30

Fix

c7be2b8

flaviendelangle force-pushed the date-range-calendar-keyboard branch from 952977a to 66ed9f7 Compare January 29, 2025 14:47

flaviendelangle commented Jan 29, 2025

View reviewed changes

Clean

1c62890

flaviendelangle force-pushed the date-range-calendar-keyboard branch from 66ed9f7 to 1c62890 Compare January 29, 2025 14:53

flaviendelangle added 2 commits January 29, 2025 16:07

Fix

9dc4ce5

Fix

0aa118e

flaviendelangle force-pushed the date-range-calendar-keyboard branch from 72e04ef to 0aa118e Compare January 29, 2025 16:24

flaviendelangle marked this pull request as ready for review January 29, 2025 16:39

flaviendelangle requested a review from LukasTy January 29, 2025 16:39

flaviendelangle added 3 commits January 30, 2025 08:58

Work

ac415aa

Fix

275cd6c

Fix

7e98691

flaviendelangle commented Jan 30, 2025

View reviewed changes

flaviendelangle added 4 commits January 30, 2025 10:51

Fix

6f9ecfb

Fix

1edfa5e

Fix

df8af27

Merge branch 'master' into date-range-calendar-keyboard

2a69797

flaviendelangle changed the title ~~[DateRangeCalendar] Add proper keyboard navigation~~ [DateRangeCalendar] Add proper arrow navigation navigation Jan 30, 2025

flaviendelangle changed the title ~~[DateRangeCalendar] Add proper arrow navigation navigation~~ [DateRangeCalendar] Support arrow navigation with multiple months rendered Jan 30, 2025

flaviendelangle added 2 commits January 31, 2025 08:11

Merge branch 'master' into date-range-calendar-keyboard

49827a7

Merge branch 'master' into date-range-calendar-keyboard

7cb25bb

LukasTy approved these changes Jan 31, 2025

View reviewed changes

LukasTy added accessibility a11y component: DateRangePicker The React component. labels Jan 31, 2025

flaviendelangle added 2 commits February 3, 2025 07:23

Merge branch 'master' into date-range-calendar-keyboard

14ff37a

Review: Lukas

d651aa9

Merge branch 'master' into date-range-calendar-keyboard

8c2697f

flaviendelangle merged commit 6760ecf into mui:master Feb 3, 2025
18 checks passed

A-s-h-o-k pushed a commit to A-s-h-o-k/mui-x that referenced this pull request Feb 4, 2025

[DateRangeCalendar] Support arrow navigation with multiple months ren…

35c8f26

…dered (mui#16363)

JCQuintas pushed a commit to JCQuintas/mui-x that referenced this pull request Feb 5, 2025

[DateRangeCalendar] Support arrow navigation with multiple months ren…

b70e407

…dered (mui#16363)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[DateRangeCalendar] Support arrow navigation with multiple months rendered #16363

[DateRangeCalendar] Support arrow navigation with multiple months rendered #16363

flaviendelangle commented Jan 28, 2025 •

edited

Loading

mui-bot commented Jan 28, 2025 •

edited

Loading

flaviendelangle Jan 29, 2025

LukasTy Jan 30, 2025

flaviendelangle Jan 30, 2025

LukasTy Jan 31, 2025

LukasTy left a comment

LukasTy Jan 30, 2025

LukasTy Jan 31, 2025

flaviendelangle commented Feb 3, 2025

[DateRangeCalendar] Support arrow navigation with multiple months rendered #16363

[DateRangeCalendar] Support arrow navigation with multiple months rendered #16363

Conversation

flaviendelangle commented Jan 28, 2025 • edited Loading

In this PR

Not in this PR

Work

mui-bot commented Jan 28, 2025 • edited Loading

flaviendelangle Jan 29, 2025

Choose a reason for hiding this comment

LukasTy Jan 30, 2025

Choose a reason for hiding this comment

flaviendelangle Jan 30, 2025

Choose a reason for hiding this comment

LukasTy Jan 31, 2025

Choose a reason for hiding this comment

LukasTy left a comment

Choose a reason for hiding this comment

LukasTy Jan 30, 2025

Choose a reason for hiding this comment

LukasTy Jan 31, 2025

Choose a reason for hiding this comment

flaviendelangle commented Feb 3, 2025

flaviendelangle commented Jan 28, 2025 •

edited

Loading

mui-bot commented Jan 28, 2025 •

edited

Loading