[fields] Reset query when pressing Backspace or Delete

mui · Feb 8, 2023 · bbe08d7 · bbe08d7
1 parent 184e39d
commit bbe08d7
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 7 deletions.
diff --git a/packages/x-date-pickers/src/internals/hooks/useField/useField.ts b/packages/x-date-pickers/src/internals/hooks/useField/useField.ts
@@ -47,7 +47,7 @@ export const useField = <
     sectionOrder,
   } = useFieldState(params);
 
-  const applyCharacterEditing = useFieldCharacterEditing<TDate, TSection>({
+  const { applyCharacterEditing, resetCharacterQuery } = useFieldCharacterEditing<TDate, TSection>({
     sections: state.sections,
     updateSectionValue,
   });
@@ -281,6 +281,7 @@ export const useField = <
         } else {
           clearActiveSection();
         }
+        resetCharacterQuery();
         break;
       }
 

diff --git a/packages/x-date-pickers/src/internals/hooks/useField/useFieldCharacterEditing.ts b/packages/x-date-pickers/src/internals/hooks/useField/useFieldCharacterEditing.ts
@@ -83,23 +83,25 @@ export const useFieldCharacterEditing = <TDate, TSection extends FieldSection>({
 
   const [query, setQuery] = React.useState<CharacterEditingQuery | null>(null);
 
+  const resetQuery = useEventCallback(() => setQuery(null));
+
   React.useEffect(() => {
     if (query != null && sections[query.sectionIndex]?.dateSectionName !== query.dateSectionName) {
-      setQuery(null);
+      resetQuery();
     }
-  }, [sections, query]);
+  }, [sections, query, resetQuery]);
 
   React.useEffect(() => {
     if (query != null) {
-      const timeout = setTimeout(() => setQuery(null), QUERY_LIFE_DURATION_MS);
+      const timeout = setTimeout(() => resetQuery(), QUERY_LIFE_DURATION_MS);
 
       return () => {
         window.clearTimeout(timeout);
       };
     }
 
     return () => {};
-  }, [query]);
+  }, [query, resetQuery]);
 
   const applyQuery = (
     { keyPressed, sectionIndex }: ApplyCharacterEditingParams,
@@ -134,7 +136,7 @@ export const useFieldCharacterEditing = <TDate, TSection extends FieldSection>({
 
     const queryResponse = getFirstSectionValueMatchingWithQuery(cleanKeyPressed, activeSection);
     if (isQueryResponseWithoutValue(queryResponse) && !queryResponse.saveQuery) {
-      setQuery(null);
+      resetQuery();
       return null;
     }
 
@@ -387,7 +389,7 @@ export const useFieldCharacterEditing = <TDate, TSection extends FieldSection>({
     );
   };
 
-  return useEventCallback((params: ApplyCharacterEditingParams) => {
+  const applyCharacterEditing = useEventCallback((params: ApplyCharacterEditingParams) => {
     const activeSection = sections[params.sectionIndex];
     const isNumericEditing = !Number.isNaN(Number(params.keyPressed));
 
@@ -453,4 +455,9 @@ export const useFieldCharacterEditing = <TDate, TSection extends FieldSection>({
         getNewSectionValue(params, sectionsValueBoundaries, null),
     });
   });
+
+  return {
+    applyCharacterEditing,
+    resetCharacterQuery: resetQuery,
+  };
 };