[pickers] Ensure internal value timezone is updated (#15435)

mui · Nov 19, 2024 · bf6bd17 · bf6bd17
1 parent e73cbb3
commit bf6bd17
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 0 deletions.
diff --git a/packages/x-date-pickers/src/MobileTimePicker/tests/timezone.MobileTimePicker.test.tsx b/packages/x-date-pickers/src/MobileTimePicker/tests/timezone.MobileTimePicker.test.tsx
@@ -21,5 +21,21 @@ describe('<MobileTimePicker /> - Timezone', () => {
 
       expect(screen.getByTestId('hours')).to.have.text('11');
     });
+
+    it('should use the updated timezone prop for the value displayed in the toolbar', () => {
+      const { setProps } = render(
+        <MobileTimePicker
+          timezone="default"
+          defaultValue={adapter.date('2022-04-17T15:30')}
+          open
+        />,
+      );
+
+      expect(screen.getByTestId('hours')).to.have.text('03');
+
+      setProps({ timezone: 'America/New_York' });
+
+      expect(screen.getByTestId('hours')).to.have.text('11');
+    });
   });
 });
diff --git a/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerValue.ts b/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerValue.ts
@@ -172,6 +172,7 @@ export const usePickerValue = <
 
   const { current: defaultValue } = React.useRef(inDefaultValue);
   const { current: isControlled } = React.useRef(inValueWithoutRenderTimezone !== undefined);
+  const [previousTimezoneProp, setPreviousTimezoneProp] = React.useState(timezoneProp);
 
   /* eslint-disable react-hooks/rules-of-hooks, react-hooks/exhaustive-deps */
   if (process.env.NODE_ENV !== 'production') {
@@ -240,6 +241,18 @@ export const usePickerValue = <
     };
   });
 
+  const timezoneFromDraftValue = valueManager.getTimezone(utils, dateState.draft);
+  if (previousTimezoneProp !== timezoneProp) {
+    setPreviousTimezoneProp(timezoneProp);
+
+    if (timezoneProp && timezoneFromDraftValue && timezoneProp !== timezoneFromDraftValue) {
+      setDateState((prev) => ({
+        ...prev,
+        draft: valueManager.setTimezone(utils, timezoneProp, prev.draft),
+      }));
+    }
+  }
+
   const { getValidationErrorForNewValue } = useValidation({
     props,
     validator,