[pickers] Always use props.value when it changes (#15490)

mui · Nov 20, 2024 · 5188453 · 5188453
1 parent 340acbd
commit 5188453
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 12 deletions.
diff --git a/packages/x-date-pickers/src/DesktopDatePicker/tests/field.DesktopDatePicker.test.tsx b/packages/x-date-pickers/src/DesktopDatePicker/tests/field.DesktopDatePicker.test.tsx
@@ -1,5 +1,6 @@
 import { fireEvent } from '@mui/internal-test-utils';
 import { DesktopDatePicker, DesktopDatePickerProps } from '@mui/x-date-pickers/DesktopDatePicker';
+import { fireUserEvent } from 'test/utils/fireUserEvent';
 import {
   createPickerRenderer,
   buildFieldInteractions,
@@ -98,6 +99,47 @@ describe('<DesktopDatePicker /> - Field', () => {
       testFormat({ views: ['year', 'month', 'day'] }, 'MM/DD/YYYY');
       testFormat({ views: ['year', 'day'] }, 'MM/DD/YYYY');
     });
+
+    it('should allow to set the value to its previous valid value using props.value', () => {
+      // Test with accessible DOM structure
+      let view = renderWithProps(
+        {
+          enableAccessibleFieldDOMStructure: true as const,
+          value: adapterToUse.date('2022-10-31'),
+        },
+        { componentFamily: 'picker' },
+      );
+
+      view.selectSection('month');
+      expectFieldValueV7(view.getSectionsContainer(), '10/31/2022');
+
+      view.pressKey(0, 'ArrowUp');
+      expectFieldValueV7(view.getSectionsContainer(), '11/31/2022');
+
+      view.setProps({ value: adapterToUse.date('2022-10-31') });
+      expectFieldValueV7(view.getSectionsContainer(), '10/31/2022');
+
+      view.unmount();
+
+      // Test with non-accessible DOM structure
+      view = renderWithProps(
+        {
+          enableAccessibleFieldDOMStructure: false as const,
+          value: adapterToUse.date('2022-10-31'),
+        },
+        { componentFamily: 'picker' },
+      );
+
+      const input = getTextbox();
+      view.selectSection('month');
+      expectFieldValueV6(input, '10/31/2022');
+
+      fireUserEvent.keyPress(input, { key: 'ArrowUp' });
+      expectFieldValueV6(input, '11/31/2022');
+
+      view.setProps({ value: adapterToUse.date('2022-10-31') });
+      expectFieldValueV6(input, '10/31/2022');
+    });
   });
 
   describe('slots: field', () => {

diff --git a/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerValue.ts b/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerValue.ts
@@ -236,7 +236,7 @@ export const usePickerValue = <
       draft: initialValue,
       lastPublishedValue: initialValue,
       lastCommittedValue: initialValue,
-      lastControlledValue: inValueWithTimezoneToRender,
+      lastControlledValue: inValueWithoutRenderTimezone,
       hasBeenModifiedSinceMount: false,
     };
   });
@@ -315,15 +315,7 @@ export const usePickerValue = <
     }
   });
 
-  if (
-    inValueWithTimezoneToRender !== undefined &&
-    (dateState.lastControlledValue === undefined ||
-      !valueManager.areValuesEqual(
-        utils,
-        dateState.lastControlledValue,
-        inValueWithTimezoneToRender,
-      ))
-  ) {
+  if (dateState.lastControlledValue !== inValueWithoutRenderTimezone) {
     const isUpdateComingFromPicker = valueManager.areValuesEqual(
       utils,
       dateState.draft,
@@ -332,7 +324,7 @@ export const usePickerValue = <
 
     setDateState((prev) => ({
       ...prev,
-      lastControlledValue: inValueWithTimezoneToRender,
+      lastControlledValue: inValueWithoutRenderTimezone,
       ...(isUpdateComingFromPicker
         ? {}
         : {

diff --git a/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerValue.types.ts b/packages/x-date-pickers/src/internals/hooks/usePicker/usePickerValue.types.ts
@@ -142,7 +142,7 @@ export interface UsePickerValueState<TValue> {
    */
   lastCommittedValue: TValue;
   /**
-   * Last value passed with `props.value`.
+   * Last value passed to `props.value`.
    * Used to update the `draft` value whenever the `value` prop changes.
    */
   lastControlledValue: TValue | undefined;