Skip to content
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] Datepicker prop view doesn't controll the visible view #13546

Closed
Svobi95 opened this issue Jun 19, 2024 · 3 comments · Fixed by #13552
Closed

[pickers] Datepicker prop view doesn't controll the visible view #13546

Svobi95 opened this issue Jun 19, 2024 · 3 comments · Fixed by #13552
Assignees
Labels
bug 🐛 Something doesn't work component: pickers This is the name of the generic UI component, not the React module!

Comments

@Svobi95
Copy link

Svobi95 commented Jun 19, 2024

Steps to reproduce

Link to live example: https://codesandbox.io/p/sandbox/jovial-pond-2jx5kf?file=%2Fsrc%2FDemo.tsx%3A15%2C31

Steps:

  1. Open https://codesandbox.io/p/sandbox/jovial-pond-2jx5kf?file=%2Fsrc%2FDemo.tsx%3A15%2C31
  2. Open the date picker
  3. Click the "change view to month" button in the toolbar to change the view to month

Current behavior

The Datepicker view is not changed to month

Expected behavior

The Datepicker view should change to month

Context

We want to have control over the visible view, which should be possible according to the documentation through the view prop.

Your environment

npx @mui/envinfo
    System:
    OS: Windows 11 10.0.22631
  Binaries:
    Node: 20.10.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.2.3 - C:\Program Files\nodejs\npm.CMD
    pnpm: Not Found
  Browsers:
    Chrome: Not Found
    Edge: Chromium (126.0.2592.56)
  npmPackages:
    @emotion/react:  11.11.4
    @emotion/styled:  11.11.5
    @mui/base:  5.0.0-beta.40
    @mui/core-downloads-tracker:  5.15.20
    @mui/icons-material: ^5.11.0 => 5.15.20
    @mui/material:  5.15.20
    @mui/private-theming:  5.15.20
    @mui/styled-engine:  5.15.14
    @mui/system:  5.15.20
    @mui/types:  7.2.14
    @mui/utils:  5.15.20
    @mui/x-date-pickers:  7.7.0
    @types/react: ^18.0.21 => 18.3.3
    react: ^18.2.0 => 18.3.1
    react-dom: ^18.2.0 => 18.3.1
    typescript: 4.9.5 => 4.9.5

Search keywords: datepicker, view

Search keywords:

@Svobi95 Svobi95 added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Jun 19, 2024
@mnajdova mnajdova transferred this issue from mui/material-ui Jun 19, 2024
@zannager zannager added the component: pickers This is the name of the generic UI component, not the React module! label Jun 19, 2024
@LukasTy LukasTy self-assigned this Jun 19, 2024
@LukasTy LukasTy added the bug 🐛 Something doesn't work label Jun 19, 2024
@LukasTy
Copy link
Member

LukasTy commented Jun 19, 2024

Hello @Svobi95, thank you for opening this issue! 🙏

The culprit of the problem seems to be here:

The same behavior works without problems on DateCalendar, but on the Picker component, this line is stopping the expected behavior.
@flaviendelangle, maybe you know why this particular decision has been taken here? 🤔

The following diff seems to solve the problem:

diff --git a/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerViews.ts b/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerViews.ts
index 4ed9a1a87..e96e3754f 100644
--- a/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerViews.ts
+++ b/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerViews.ts
@@ -183,12 +183,12 @@ export const usePickerViews = <
   TAdditionalProps
 >): UsePickerViewsResponse<TView> => {
   const { onChange, open, onClose } = propsFromPickerValue;
-  const { views, openTo, onViewChange, viewRenderers, timezone } = props;
+  const { view: inView, views, openTo, onViewChange, viewRenderers, timezone } = props;
   const { className, sx, ...propsToForwardToView } = props;
 
   const { view, setView, defaultView, focusedView, setFocusedView, setValueAndGoToNextView } =
     useViews({
-      view: undefined,
+      view: inView,
       views,
       openTo,
       onChange,

Running tests after this change does not produce any failures. 🤔 🤷

@Svobi95 an additional note is that your usage of toolbar slot might result in problems even if the issue was fixed.
Consider reading more about recommended slot usage.

@LukasTy LukasTy removed the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Jun 19, 2024
@LukasTy LukasTy changed the title Datepicker prop view doesn't controll the visible view [pickers] Datepicker prop view doesn't controll the visible view Jun 19, 2024
@flaviendelangle
Copy link
Member

I must admit that I don't remember, and that your fix seems to make a lot of sense...
All the tests are passing, there is no comment above the view: undefined explaining why we don't forward it.
I think that if you can play with it and it does not break, then we can say that there was no big reason hidden behind this code but just a mistake on my side 😆

Copy link

⚠️ This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

@Svobi95: How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work component: pickers This is the name of the generic UI component, not the React module!
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants