-
-
Notifications
You must be signed in to change notification settings - Fork 1.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[pickers] In Custom calendar header change to month view then change year, but not apply to the current date #13119
Comments
@flaviendelangle Sorry, I updated codesandbox link, please try it again. |
Hi, This is an interesting issue. In the default UI, you here is the reproduction:
The reason is that the A potential fix is to pass the current visible month as the 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 |
@flaviendelangle your suggested changes make sense at first sight. However, regarding the 2nd change, shouldn't we align the behavior then and make the |
Probably yes |
@flaviendelangle I add a views={["day", "month"]} in my demo, I found another weird thing.
|
@Vxee that one is expected. The views are ordered, the one you gave means that when you select a value on the |
Steps to reproduce
Link to live example: (required)
codesandbox link
Steps:
Current behavior
No response
Expected behavior
The year should be previous year.
Context
No response
Your environment
npx @mui/envinfo
Search keywords: Custom calendar header
The text was updated successfully, but these errors were encountered: