[fields] Reset query when pressing Backspace or Delete (#7855)

mui · Feb 8, 2023 · 51a7c31 · 51a7c31
1 parent 9c4b9a6
commit 51a7c31
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 7 deletions.
diff --git a/packages/x-date-pickers/src/DateField/tests/editing.DateField.test.tsx b/packages/x-date-pickers/src/DateField/tests/editing.DateField.test.tsx
@@ -315,6 +315,21 @@ describe('<DateField /> - Editing', () => {
       expectInputValue(input, 'MMMM YYYY');
     });
 
+    it('should not keep query after typing again on a cleared section', () => {
+      render(<DateField format={adapterToUse.formats.year} />);
+      const input = screen.getByRole('textbox');
+      clickOnInput(input, 1);
+
+      fireEvent.change(input, { target: { value: '2' } }); // press "2"
+      expectInputValue(input, '0002');
+
+      userEvent.keyPress(input, { key: 'Backspace' });
+      expectInputValue(input, 'YYYY');
+
+      fireEvent.change(input, { target: { value: '2' } }); // press "2"
+      expectInputValue(input, '0002');
+    });
+
     it('should not clear the sections when props.readOnly = true', () => {
       testKeyPress({
         format: adapterToUse.formats.year,

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,
+  };
 };