[fields] Allow empty textField slot placeholder value (#13148)

mui · May 16, 2024 · c4cc7a3 · c4cc7a3
1 parent 0e6031d
commit c4cc7a3
Show file tree

Hide file tree

Showing 2 changed files with 26 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
@@ -138,18 +138,34 @@ describe('<DesktopDatePicker /> - Field', () => {
       Component: DesktopDatePicker,
     });
 
-    it('should allow to override the placeholder (v6 only)', () => {
-      renderWithProps({
-        enableAccessibleFieldDOMStructure: false,
-        slotProps: {
-          textField: {
-            placeholder: 'Custom placeholder',
+    describe('placeholder override (v6 only)', () => {
+      it('should allow to override the placeholder', () => {
+        renderWithProps({
+          enableAccessibleFieldDOMStructure: false,
+          slotProps: {
+            textField: {
+              placeholder: 'Custom placeholder',
+            },
           },
-        },
+        });
+
+        const input = getTextbox();
+        expectFieldPlaceholderV6(input, 'Custom placeholder');
       });
 
-      const input = getTextbox();
-      expectFieldPlaceholderV6(input, 'Custom placeholder');
+      it('should render blank placeholder when prop is an empty string', () => {
+        renderWithProps({
+          enableAccessibleFieldDOMStructure: false,
+          slotProps: {
+            textField: {
+              placeholder: '',
+            },
+          },
+        });
+
+        const input = getTextbox();
+        expectFieldPlaceholderV6(input, '');
+      });
     });
   });
 

diff --git a/packages/x-date-pickers/src/internals/hooks/useField/useFieldV6TextField.ts b/packages/x-date-pickers/src/internals/hooks/useField/useFieldV6TextField.ts
@@ -390,7 +390,7 @@ export const useFieldV6TextField: UseFieldTextField<false> = (params) => {
   });
 
   const placeholder = React.useMemo(() => {
-    if (inPlaceholder) {
+    if (inPlaceholder !== undefined) {
       return inPlaceholder;
     }