From e17d755d06c218e725d6e316e3d17b71fe4fad3d Mon Sep 17 00:00:00 2001 From: Alexandre Fauquette Date: Mon, 24 Oct 2022 10:10:35 +0200 Subject: [PATCH] [pickers] Update input when inputFormat is modified --- .../src/internals/hooks/useMaskedInput.tsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/x-date-pickers/src/internals/hooks/useMaskedInput.tsx b/packages/x-date-pickers/src/internals/hooks/useMaskedInput.tsx index 80d2b7ee3c36..a6e29b7bd8f7 100644 --- a/packages/x-date-pickers/src/internals/hooks/useMaskedInput.tsx +++ b/packages/x-date-pickers/src/internals/hooks/useMaskedInput.tsx @@ -81,21 +81,28 @@ export const useMaskedInput = ({ // Inspired from autocomplete: https://github.com/mui/material-ui/blob/2c89d036dc2e16f100528f161600dffc83241768/packages/mui-base/src/AutocompleteUnstyled/useAutocomplete.js#L185:L201 const prevRawValue = React.useRef(); const prevLocale = React.useRef(utils.locale); + const prevInputFormat = React.useRef(inputFormat); React.useEffect(() => { const rawValueHasChanged = rawValue !== prevRawValue.current; const localeHasChanged = utils.locale !== prevLocale.current; + const inputFormatHasChanged = inputFormat !== prevInputFormat.current; prevRawValue.current = rawValue; prevLocale.current = utils.locale; + prevInputFormat.current = inputFormat; - if (!rawValueHasChanged && !localeHasChanged) { + if (!rawValueHasChanged && !localeHasChanged && !inputFormatHasChanged) { return; } const newParsedValue = rawValue === null ? null : utils.date(rawValue); const isAcceptedValue = rawValue === null || utils.isValid(newParsedValue); - if (!localeHasChanged && (!isAcceptedValue || utils.isEqual(innerInputValue, newParsedValue))) { + if ( + !localeHasChanged && + !inputFormatHasChanged && + (!isAcceptedValue || utils.isEqual(innerInputValue, newParsedValue)) + ) { return; }