diff --git a/packages/x-date-pickers/src/internals/hooks/useField/useField.ts b/packages/x-date-pickers/src/internals/hooks/useField/useField.ts index c811d4a511da..b50e4e112547 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/useField.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/useField.ts @@ -372,6 +372,16 @@ 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 the two `onChange` calls and would cause false positives. + React.useEffect(() => { + if (state.tempValueStrAndroid != null && selectedSectionIndexes != null) { + 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 index 2dcab9e618cf..f454b09e91ec 100644 --- 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, })); };