[field] Improve the field controlled edition (#17816)

Author: flaviendelangle

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

@@ -200,8 +200,13 @@ export const useFieldCharacterEditing = <TValue extends PickerValidValue>({
   };
 
   const applyNumericEditing: CharacterEditingApplier = (params) => {
-    const getNewSectionValue = (
-      queryValue: string,
+    const getNewSectionValue = ({
+      queryValue,
+      skipIfBelowMinimum,
+      section,
+    }: {
+      queryValue: string;
+      skipIfBelowMinimum: boolean;
       section: Pick<
         FieldSection,
         | 'format'
@@ -210,8 +215,8 @@ export const useFieldCharacterEditing = <TValue extends PickerValidValue>({
         | 'hasLeadingZerosInFormat'
         | 'hasLeadingZerosInInput'
         | 'maxLength'
-      >,
-    ): ReturnType<QueryApplier<TValue>> => {
+      >;
+    }): ReturnType<QueryApplier<TValue>> => {
       const cleanQueryValue = removeLocalizedDigits(queryValue, localizedDigits);
       const queryValueNumber = Number(cleanQueryValue);
       const sectionBoundaries = sectionsValueBoundaries[section.type]({
@@ -227,7 +232,7 @@ export const useFieldCharacterEditing = <TValue extends PickerValidValue>({
       // If the user types `0` on a month section,
       // It is below the minimum, but we want to store the `0` in the query,
       // So that when he pressed `1`, it will store `01` and move to the next section.
-      if (queryValueNumber < sectionBoundaries.minimum) {
+      if (skipIfBelowMinimum && queryValueNumber < sectionBoundaries.minimum) {
         return { saveQuery: true };
       }
 
@@ -254,7 +259,11 @@ export const useFieldCharacterEditing = <TValue extends PickerValidValue>({
         activeSection.contentType === 'digit' ||
         activeSection.contentType === 'digit-with-letter'
       ) {
-        return getNewSectionValue(queryValue, activeSection);
+        return getNewSectionValue({
+          queryValue,
+          skipIfBelowMinimum: false,
+          section: activeSection,
+        });
       }
 
       // When editing a letter-format month and the user presses a digit,
@@ -267,13 +276,17 @@ export const useFieldCharacterEditing = <TValue extends PickerValidValue>({
           'MM',
         );
 
-        const response = getNewSectionValue(queryValue, {
-          type: activeSection.type,
-          format: 'MM',
-          hasLeadingZerosInFormat,
-          hasLeadingZerosInInput: true,
-          contentType: 'digit',
-          maxLength: 2,
+        const response = getNewSectionValue({
+          queryValue,
+          skipIfBelowMinimum: true,
+          section: {
+            type: activeSection.type,
+            format: 'MM',
+            hasLeadingZerosInFormat,
+            hasLeadingZerosInInput: true,
+            contentType: 'digit',
+            maxLength: 2,
+          },
         });
 
         if (isQueryResponseWithoutValue(response)) {
@@ -296,7 +309,11 @@ export const useFieldCharacterEditing = <TValue extends PickerValidValue>({
       // When editing a letter-format weekDay and the user presses a digit,
       // We can support the numeric editing by returning the nth day in the week day array.
       if (activeSection.type === 'weekDay') {
-        const response = getNewSectionValue(queryValue, activeSection);
+        const response = getNewSectionValue({
+          queryValue,
+          skipIfBelowMinimum: true,
+          section: activeSection,
+        });
         if (isQueryResponseWithoutValue(response)) {
           return response;
         }

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

@@ -373,10 +373,13 @@ export const useFieldState = <
     }
 
     /**
-     * If all the sections are filled but the date is invalid,
+     * If all the sections are filled but the date is invalid and the previous date is valid or null,
      * Then we publish an invalid date.
      */
-    if (newActiveDateSections.every((sectionBis) => sectionBis.value !== '')) {
+    if (
+      newActiveDateSections.every((sectionBis) => sectionBis.value !== '') &&
+      (activeDate == null || utils.isValid(activeDate))
+    ) {
       setSectionUpdateToApplyOnNextInvalidDate(newSectionValue);
       return publishValue(fieldValueManager.updateDateInValue(value, section, newActiveDate));
     }