[fields] Fix placeholder override

mui · Mar 28, 2024 · 9e1f1be · 9e1f1be
1 parent 8644e2a
commit 9e1f1be
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 10 deletions.
diff --git a/packages/x-date-pickers/src/internals/hooks/useField/useField.types.ts b/packages/x-date-pickers/src/internals/hooks/useField/useField.types.ts
@@ -170,6 +170,7 @@ export interface UseFieldV6ForwardedProps {
   onClick?: React.MouseEventHandler;
   onFocus?: () => void;
   onPaste?: React.ClipboardEventHandler<HTMLDivElement>;
+  placeholder?: string;
 }
 
 interface UseFieldV6AdditionalProps

diff --git a/packages/x-date-pickers/src/internals/hooks/useField/useFieldV6TextField.ts b/packages/x-date-pickers/src/internals/hooks/useField/useFieldV6TextField.ts
@@ -80,7 +80,14 @@ export const useFieldV6TextField: UseFieldTextField<false> = (params) => {
   const focusTimeoutRef = React.useRef<ReturnType<typeof setTimeout>>();
 
   const {
-    forwardedProps: { onFocus, onClick, onPaste, onBlur, inputRef: inputRefProp },
+    forwardedProps: {
+      onFocus,
+      onClick,
+      onPaste,
+      onBlur,
+      inputRef: inputRefProp,
+      placeholder: inPlaceholder,
+    },
     internalProps: { readOnly = false },
     parsedSelectedSections,
     activeSectionIndex,
@@ -100,6 +107,8 @@ export const useFieldV6TextField: UseFieldTextField<false> = (params) => {
     localizedDigits,
   } = params;
 
+  console.log(params);
+
   const inputRef = React.useRef<HTMLInputElement>(null);
   const handleRef = useForkRef(inputRefProp, inputRef);
 
@@ -381,15 +390,24 @@ export const useFieldV6TextField: UseFieldTextField<false> = (params) => {
     applyCharacterEditing({ keyPressed, sectionIndex: activeSectionIndex });
   });
 
-  const placeholder = React.useMemo(
-    () =>
-      fieldValueManager.getV6InputValueFromSections(
-        getSectionsFromValue(valueManager.emptyValue),
-        localizedDigits,
-        isRTL,
-      ),
-    [fieldValueManager, getSectionsFromValue, valueManager.emptyValue, localizedDigits, isRTL],
-  );
+  const placeholder = React.useMemo(() => {
+    if (inPlaceholder) {
+      return inPlaceholder;
+    }
+
+    return fieldValueManager.getV6InputValueFromSections(
+      getSectionsFromValue(valueManager.emptyValue),
+      localizedDigits,
+      isRTL,
+    );
+  }, [
+    inPlaceholder,
+    fieldValueManager,
+    getSectionsFromValue,
+    valueManager.emptyValue,
+    localizedDigits,
+    isRTL,
+  ]);
 
   const valueStr = React.useMemo(
     () =>