[fields] Support Backspace key on Android (#7842)

mui · Feb 10, 2023 · 801f79b · 801f79b
1 parent 5e15293
commit 801f79b
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 16 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
@@ -921,17 +921,21 @@ describe('<DateField /> - Editing', () => {
 
       clickOnInput(input, sectionStart, sectionStart + 1);
 
-      // Remove the selected section
-      fireEvent.change(input, { target: { value: initialValueStr.replace('16', '') } });
+      act(() => {
+        // Remove the selected section
+        fireEvent.change(input, { target: { value: initialValueStr.replace('16', '') } });
 
-      // // Set the key pressed in the selected section
-      fireEvent.change(input, { target: { value: initialValueStr.replace('16', '2') } });
+        // // Set the key pressed in the selected section
+        fireEvent.change(input, { target: { value: initialValueStr.replace('16', '2') } });
+      });
 
-      // Remove the selected section
-      fireEvent.change(input, { target: { value: initialValueStr.replace('16', '') } });
+      act(() => {
+        // Remove the selected section
+        fireEvent.change(input, { target: { value: initialValueStr.replace('16', '') } });
 
-      // Set the key pressed in the selected section
-      fireEvent.change(input, { target: { value: initialValueStr.replace('16', '1') } });
+        // Set the key pressed in the selected section
+        fireEvent.change(input, { target: { value: initialValueStr.replace('16', '1') } });
+      });
 
       expectInputValue(input, '05 / 21 / 2022');
     });
@@ -950,17 +954,21 @@ describe('<DateField /> - Editing', () => {
 
       clickOnInput(input, sectionStart, sectionStart + 1);
 
-      // Remove the selected section
-      fireEvent.change(input, { target: { value: initialValueStr.replace('May', '') } });
+      act(() => {
+        // Remove the selected section
+        fireEvent.change(input, { target: { value: initialValueStr.replace('May', '') } });
 
-      // // Set the key pressed in the selected section
-      fireEvent.change(input, { target: { value: initialValueStr.replace('May', 'J') } });
+        // // Set the key pressed in the selected section
+        fireEvent.change(input, { target: { value: initialValueStr.replace('May', 'J') } });
+      });
 
-      // Remove the selected section
-      fireEvent.change(input, { target: { value: initialValueStr.replace('May', '') } });
+      act(() => {
+        // Remove the selected section
+        fireEvent.change(input, { target: { value: initialValueStr.replace('May', '') } });
 
-      // Set the key pressed in the selected section
-      fireEvent.change(input, { target: { value: initialValueStr.replace('May', 'u') } });
+        // Set the key pressed in the selected section
+        fireEvent.change(input, { target: { value: initialValueStr.replace('May', 'u') } });
+      });
 
       expectInputValue(input, 'June 2022');
     });

diff --git a/packages/x-date-pickers/src/internals/hooks/useField/useField.ts b/packages/x-date-pickers/src/internals/hooks/useField/useField.ts
@@ -373,6 +373,17 @@ export const useField = <
     return () => window.clearTimeout(focusTimeoutRef.current);
   }, []); // eslint-disable-line react-hooks/exhaustive-deps
 
+  // If `state.tempValueStrAndroid` is still defined when running `useEffect`,
+  // Then `onChange` has only been called once, which means the user pressed `Backspace` to reset the section.
+  // This causes a small flickering on Android,
+  // But we can't use `useEnhancedEffect` which is always called before the second `onChange` call and then would cause false positives.
+  React.useEffect(() => {
+    if (state.tempValueStrAndroid != null && selectedSectionIndexes != null) {
+      resetCharacterQuery();
+      clearActiveSection();
+    }
+  }, [state.tempValueStrAndroid]); // eslint-disable-line react-hooks/exhaustive-deps
+
   const valueStr = React.useMemo(
     () => state.tempValueStrAndroid ?? fieldValueManager.getValueStrFromSections(state.sections),
     [state.sections, fieldValueManager, state.tempValueStrAndroid],

diff --git a/packages/x-date-pickers/src/internals/hooks/useField/useFieldState.ts b/packages/x-date-pickers/src/internals/hooks/useField/useFieldState.ts
@@ -242,6 +242,7 @@ export const useFieldState = <
     return setState((prevState) => ({
       ...prevState,
       sections: newSections,
+      tempValueStrAndroid: null,
       ...newValue,
     }));
   };