[pickers] Fix controlled view behavior (#13552)

mui · Jun 20, 2024 · 0b0f3b4 · 0b0f3b4
1 parent 83b2695
commit 0b0f3b4
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 2 deletions.
diff --git a/packages/x-date-pickers/src/DesktopDatePicker/tests/DesktopDatePicker.test.tsx b/packages/x-date-pickers/src/DesktopDatePicker/tests/DesktopDatePicker.test.tsx
@@ -110,6 +110,30 @@ describe('<DesktopDatePicker />', () => {
       fireEvent.click(screen.getByText('2020'));
       expect(document.activeElement).to.have.text('5');
     });
+
+    it('should go to the relevant `view` when `view` prop changes', () => {
+      const { setProps } = render(
+        <DesktopDatePicker
+          defaultValue={adapterToUse.date('2018-01-01')}
+          views={['year', 'month', 'day']}
+          view="month"
+        />,
+      );
+
+      openPicker({ type: 'date', variant: 'desktop' });
+
+      expect(screen.getByRole('radio', { checked: true, name: 'January' })).to.not.equal(null);
+
+      // Dismiss the picker
+      userEvent.keyPress(document.activeElement!, { key: 'Escape' });
+      setProps({ view: 'year' });
+      openPicker({ type: 'date', variant: 'desktop' });
+      // wait for all pending changes to be flushed
+      clock.runToLast();
+
+      // should have changed the open view
+      expect(screen.getByRole('radio', { checked: true, name: '2018' })).to.not.equal(null);
+    });
   });
 
   describe('scroll', () => {

diff --git 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,