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 c811d4a511daa..ab2bfdf830add 100644 --- 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({ + const { applyCharacterEditing, resetCharacterQuery } = useFieldCharacterEditing({ 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 index 2ed1f13cae514..9c65b546b0020 100644 --- a/packages/x-date-pickers/src/internals/hooks/useField/useFieldCharacterEditing.ts +++ b/packages/x-date-pickers/src/internals/hooks/useField/useFieldCharacterEditing.ts @@ -83,15 +83,17 @@ export const useFieldCharacterEditing = ({ const [query, setQuery] = React.useState(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); @@ -99,7 +101,7 @@ export const useFieldCharacterEditing = ({ } return () => {}; - }, [query]); + }, [query, resetQuery]); const applyQuery = ( { keyPressed, sectionIndex }: ApplyCharacterEditingParams, @@ -134,7 +136,7 @@ export const useFieldCharacterEditing = ({ const queryResponse = getFirstSectionValueMatchingWithQuery(cleanKeyPressed, activeSection); if (isQueryResponseWithoutValue(queryResponse) && !queryResponse.saveQuery) { - setQuery(null); + resetQuery(); return null; } @@ -387,7 +389,7 @@ export const useFieldCharacterEditing = ({ ); }; - 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 = ({ getNewSectionValue(params, sectionsValueBoundaries, null), }); }); + + return { + applyCharacterEditing, + resetCharacterQuery: resetQuery, + }; };