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

[Svobi95]

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:

[LukasTy]

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

The culprit of the problem seems to be here:

mui-x/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerViews.ts

Line 191 in dc0a290

view: undefined,

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.

[flaviendelangle]

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 😆

[github-actions]

⚠️ 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.