[pickers] Update input when inputFormat is modified (mui#6617)

packages/x-date-pickers/src/internals/hooks/useMaskedInput.tsx

@@ -78,14 +78,17 @@ export const useMaskedInput = <TDate extends unknown>({
   // Inspired from autocomplete: https://github.com/mui/material-ui/blob/2c89d036dc2e16f100528f161600dffc83241768/packages/mui-base/src/AutocompleteUnstyled/useAutocomplete.js#L185:L201
   const prevValue = React.useRef<TDate | null>(null);
   const prevLocale = React.useRef<Locale | string>(utils.locale);
+  const prevInputFormat = React.useRef<string>(inputFormat);
 
   React.useEffect(() => {
     const valueHasChanged = value !== prevValue.current;
     const localeHasChanged = utils.locale !== prevLocale.current;
+    const inputFormatHasChanged = inputFormat !== prevInputFormat.current;
     prevValue.current = value;
     prevLocale.current = utils.locale;
+    prevInputFormat.current = inputFormat;
 
-    if (!valueHasChanged && !localeHasChanged) {
+    if (!valueHasChanged && !localeHasChanged && !inputFormatHasChanged) {
       return;
     }
 
@@ -94,10 +97,9 @@ export const useMaskedInput = <TDate extends unknown>({
     const innerEqualsProvided =
       innerInputValue === null
         ? value === null
-        : value !== null &&
-        Math.abs(utils.getDiff(innerInputValue, value, 'seconds')) === 0;
+        : value !== null && Math.abs(utils.getDiff(innerInputValue, value, 'seconds')) === 0;
 
-    if (!localeHasChanged && (!isAcceptedValue || innerEqualsProvided)) {
+    if (!localeHasChanged && !inputFormatHasChanged && (!isAcceptedValue || innerEqualsProvided)) {
       return;
     }
 
@@ -130,11 +132,11 @@ export const useMaskedInput = <TDate extends unknown>({
   const inputStateArgs = shouldUseMaskedInput
     ? rifmProps
     : {
-      value: innerDisplayedInputValue,
-      onChange: (event: React.ChangeEvent<HTMLInputElement>) => {
-        handleChange(event.currentTarget.value);
-      },
-    };
+        value: innerDisplayedInputValue,
+        onChange: (event: React.ChangeEvent<HTMLInputElement>) => {
+          handleChange(event.currentTarget.value);
+        },
+      };
 
   return {
     label,