preserve typed input when validator invalidates controlled dates

Author: mj12albert

packages/x-date-pickers/src/DateField/tests/editing.DateField.test.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import { spy } from 'sinon';
 import { DateField } from '@mui/x-date-pickers/DateField';
 import { act, fireEvent, waitFor } from '@mui/internal-test-utils';
@@ -63,6 +64,50 @@ describe('<DateField /> - Editing', () => {
           expectFieldValue(view.getSectionsContainer(), 'DD MMMM');
         });
       });
+
+      it('should keep the entered sections when the controlled value ignores a validator-invalid date', async () => {
+        const view = renderWithProps(
+          {
+            minDate: adapter.date('2022-01-01'),
+            maxDate: adapter.date('2022-12-31'),
+          },
+          {
+            hook: function useControlledInvalidValueProps() {
+              const [value, setValue] = React.useState(null);
+
+              return {
+                value,
+                onChange: (newValue, context) => {
+                  if (context.validationError == null) {
+                    setValue(newValue);
+                  }
+                },
+              };
+            },
+          },
+        );
+
+        await view.selectSectionAsync('month');
+        await view.user.keyboard('04');
+        await view.selectSectionAsync('day');
+        await view.user.keyboard('17');
+        expectFieldValue(view.getSectionsContainer(), '04/17/YYYY');
+
+        await view.selectSectionAsync('year');
+        await view.user.keyboard('2023');
+
+        await act(async () => {
+          await new Promise((resolve) => {
+            setTimeout(resolve, 0);
+          });
+        });
+
+        expectFieldValue(view.getSectionsContainer(), '04/17/2023');
+
+        await view.selectSectionAsync('year');
+        await view.user.keyboard('2022');
+        expectFieldValue(view.getSectionsContainer(), '04/17/2022');
+      });
     },
   );
 

packages/x-date-pickers/src/DesktopDatePicker/tests/field.DesktopDatePicker.test.tsx

@@ -1,3 +1,5 @@
+import * as React from 'react';
+import { act } from '@mui/internal-test-utils';
 import { DesktopDatePicker, DesktopDatePickerProps } from '@mui/x-date-pickers/DesktopDatePicker';
 import {
   createPickerRenderer,
@@ -73,4 +75,55 @@ describe('<DesktopDatePicker /> - Field', () => {
       expectFieldValue(view.getSectionsContainer(), 'MMMM 2022');
     });
   });
+
+  describeAdapters(
+    'Controlled invalid value',
+    DesktopDatePicker,
+    ({ adapter, renderWithProps }) => {
+      it('should keep the entered sections when the controlled value ignores a validator-invalid date', async () => {
+        const view = renderWithProps(
+          {
+            minDate: adapter.date('2022-01-01'),
+            maxDate: adapter.date('2022-12-31'),
+          },
+          {
+            componentFamily: 'picker',
+            hook: function useControlledInvalidValueProps() {
+              const [value, setValue] = React.useState(null);
+
+              return {
+                value,
+                onChange: (newValue, context) => {
+                  if (context.validationError == null) {
+                    setValue(newValue);
+                  }
+                },
+              };
+            },
+          },
+        );
+
+        await view.selectSectionAsync('month');
+        await view.user.keyboard('04');
+        await view.selectSectionAsync('day');
+        await view.user.keyboard('17');
+        expectFieldValue(view.getSectionsContainer(), '04/17/YYYY');
+
+        await view.selectSectionAsync('year');
+        await view.user.keyboard('2023');
+
+        await act(async () => {
+          await new Promise((resolve) => {
+            setTimeout(resolve, 0);
+          });
+        });
+
+        expectFieldValue(view.getSectionsContainer(), '04/17/2023');
+
+        await view.selectSectionAsync('year');
+        await view.user.keyboard('2022');
+        expectFieldValue(view.getSectionsContainer(), '04/17/2022');
+      });
+    },
+  );
 });

packages/x-date-pickers/src/internals/hooks/useField/useFieldState.ts

@@ -91,7 +91,7 @@ export const useFieldState = <
     valueRef.current = value;
   }, [value]);
 
-  const { hasValidationError } = useValidation({
+  const { hasValidationError, getValidationErrorForNewValue } = useValidation({
     props: internalPropsWithDefaults,
     validator,
     timezone,
@@ -350,8 +350,18 @@ export const useFieldState = <
         fieldValueManager.getDateFromSection(state.referenceValue as any, section)!,
         true,
       );
+      const newValue = fieldValueManager.updateDateInValue(value, section, mergedDate);
+      const hasValidationErrorOnNewValue = validator.valueManager.hasError(
+        getValidationErrorForNewValue(newValue),
+      );
 
-      if (activeDate == null) {
+      if (hasValidationErrorOnNewValue) {
+        setState((prevState) => ({
+          ...prevState,
+          sections: newSections,
+          tempValueStrAndroid: null,
+        }));
+      } else if (activeDate == null) {
         cleanActiveDateSectionsIfValueNullTimeout.start(0, () => {
           if (valueRef.current === value) {
             setState((prevState) => ({
@@ -363,7 +373,7 @@ export const useFieldState = <
         });
       }
 
-      return publishValue(fieldValueManager.updateDateInValue(value, section, mergedDate));
+      return publishValue(newValue);
     }
 
     /**