[pickers] In Custom calendar header change to month view then change year, but not apply to the current date

[Vxee]

trafficstars

Steps to reproduce

Link to live example: (required)

codesandbox link

Steps:

1. Click the custom calendar header month button, it will display the month view
2. Click the double left button, it will turn to the previous year
3. Then select a month
4. Go back to date picker, the year is not the previous year.

Current behavior

No response

Expected behavior

The year should be previous year.

Context

No response

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: Custom calendar header

[flaviendelangle]

Hi,

I can't access your example

[Vxee]

@flaviendelangle Sorry, I updated codesandbox link, please try it again.

[flaviendelangle]

Hi,

This is an interesting issue. I can reproduce the same weird behavior on the default UI but it is a lot more problematic in yours.

In the default UI, you here is the reproduction:

1. Set views={['day', 'month']}
2. In the day view you change the month until you reach a month in 2023
3. Click on the header to switch to the month view
4. Select a month => selects the date in 2024

The reason is that the onMonthChange prop in the header is designed to only change the current visible month (in the day view), but it does not set any value. When you switch to the month view, this "current visible month" is not passed to MonthCalendar.

A potential fix is to pass the current visible month as the MonthCalendar referenceDate (this make a lot of sense IMHO). This solves the problem in the default UI, but your UI we have a 2nd problem, which is that referenceDate changes after the component mounts are ignored.

To fully fix the behavior in your demo, we would need to do the following changes:

diff --git a/packages/x-date-pickers/src/DateCalendar/DateCalendar.tsx b/packages/x-date-pickers/src/DateCalendar/DateCalendar.tsx
index 95df73430..d61cc6576 100644
--- a/packages/x-date-pickers/src/DateCalendar/DateCalendar.tsx
+++ b/packages/x-date-pickers/src/DateCalendar/DateCalendar.tsx
@@ -369,7 +369,7 @@ export const DateCalendar = React.forwardRef(function DateCalendar<TDate extends
               shouldDisableMonth={shouldDisableMonth}
               onFocusedViewChange={(isViewFocused) => setFocusedView('month', isViewFocused)}
               monthsPerRow={monthsPerRow}
-              referenceDate={referenceDate}
+              referenceDate={calendarState.currentMonth}
             />
           )}
 
diff --git a/packages/x-date-pickers/src/MonthCalendar/MonthCalendar.tsx b/packages/x-date-pickers/src/MonthCalendar/MonthCalendar.tsx
index a537531d9..a2e05d3e6 100644
--- a/packages/x-date-pickers/src/MonthCalendar/MonthCalendar.tsx
+++ b/packages/x-date-pickers/src/MonthCalendar/MonthCalendar.tsx
@@ -132,7 +132,7 @@ export const MonthCalendar = React.forwardRef(function MonthCalendar<TDate exten
         referenceDate: referenceDateProp,
         granularity: SECTION_TYPE_GRANULARITY.month,
       }),
-    [], // eslint-disable-line react-hooks/exhaustive-deps
+    [referenceDateProp], // eslint-disable-line react-hooks/exhaustive-deps
   );
 
   const ownerState = props;

@LukasTy I would love your opinion on this one

[LukasTy]

@flaviendelangle your suggested changes make sense at first sight. We'd need to double-check what other behavior changes they cause if any.

However, regarding the 2nd change, shouldn't we align the behavior then and make the referenceDate updatable/reactive in all instances?

[flaviendelangle]

However, regarding the 2nd change, shouldn't we align the behavior then and make the referenceDate updatable/reactive in all instances?

Probably yes

[Vxee]

@flaviendelangle I add a views={["day", "month"]} in my demo, I found another weird thing.

1. I click month on the header, switch to the month view
2. Click the month, then will not go back to day view.

[flaviendelangle]

@Vxee that one is expected.

The views are ordered, the one you gave means that when you select a value on the day view, it goes to the month view. Then when you select something on the month view the value selection is over and it does not change view.