[fields] Fix placeholder override (#12589)

mui · Mar 28, 2024 · 3341a1a · 3341a1a
1 parent 8644e2a
commit 3341a1a
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 10 deletions.
diff --git a/packages/x-date-pickers/src/DesktopDatePicker/tests/field.DesktopDatePicker.test.tsx b/packages/x-date-pickers/src/DesktopDatePicker/tests/field.DesktopDatePicker.test.tsx
@@ -100,6 +100,59 @@ describe('<DesktopDatePicker /> - Field', () => {
     });
   });
 
+  describe('slots: field', () => {
+    const { render, clock } = createPickerRenderer({
+      clock: 'fake',
+      clockConfig: new Date('2018-01-01T10:05:05.000'),
+    });
+    const { renderWithProps } = buildFieldInteractions({
+      clock,
+      render,
+      Component: DesktopDatePicker,
+    });
+
+    it('should allow to override the placeholder (v6 only)', () => {
+      renderWithProps({
+        enableAccessibleFieldDOMStructure: false,
+        slotProps: {
+          field: {
+            // @ts-ignore
+            placeholder: 'Custom placeholder',
+          },
+        },
+      });
+
+      const input = getTextbox();
+      expectFieldPlaceholderV6(input, 'Custom placeholder');
+    });
+  });
+
+  describe('slots: textField', () => {
+    const { render, clock } = createPickerRenderer({
+      clock: 'fake',
+      clockConfig: new Date('2018-01-01T10:05:05.000'),
+    });
+    const { renderWithProps } = buildFieldInteractions({
+      clock,
+      render,
+      Component: DesktopDatePicker,
+    });
+
+    it('should allow to override the placeholder (v6 only)', () => {
+      renderWithProps({
+        enableAccessibleFieldDOMStructure: false,
+        slotProps: {
+          textField: {
+            placeholder: 'Custom placeholder',
+          },
+        },
+      });
+
+      const input = getTextbox();
+      expectFieldPlaceholderV6(input, 'Custom placeholder');
+    });
+  });
+
   describeAdapters('Timezone', DesktopDatePicker, ({ adapter, renderWithProps }) => {
     it('should clear the selected section when all sections are completed when using timezones', () => {
       const v7Response = renderWithProps(

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,
@@ -381,15 +388,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(
     () =>