diff --git a/packages/x-date-pickers/src/internals/hooks/useMaskedInput.tsx b/packages/x-date-pickers/src/internals/hooks/useMaskedInput.tsx index 965399773eaa..7584ee4e19f8 100644 --- a/packages/x-date-pickers/src/internals/hooks/useMaskedInput.tsx +++ b/packages/x-date-pickers/src/internals/hooks/useMaskedInput.tsx @@ -81,14 +81,17 @@ 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; } @@ -101,7 +104,7 @@ export const useMaskedInput = ({ : newParsedValue !== null && Math.abs(utils.getDiff(innerInputValue, newParsedValue, 'seconds')) === 0; - if (!localeHasChanged && (!isAcceptedValue || innerEqualsParsed)) { + if (!localeHasChanged && !inputFormatHasChanged && (!isAcceptedValue || innerEqualsParsed)) { return; }