[joy-ui][Autocomplete] Hide placeholder when multiple options are selected #47722

packages/mui-joy/src/Autocomplete/Autocomplete.test.tsx

@@ -2421,6 +2421,29 @@ describe('Joy <Autocomplete />', () => {
     });
   });
 
+  describe('prop: placeholder', () => {
+    it('should render placeholder when no options are selected', () => {
+      render(
+        <Autocomplete multiple options={['one', 'two', 'three']} placeholder="Select options" />,
+      );
+      const textbox = screen.getByRole('combobox');
+      expect(textbox).to.have.attribute('placeholder', 'Select options');
+    });
+
+    it('should hide placeholder when options are selected', () => {
+      render(
+        <Autocomplete
+          multiple
+          options={['one', 'two', 'three']}
+          defaultValue={['one']}
+          placeholder="Select options"
+        />,
+      );
+      const textbox = screen.getByRole('combobox');
+      expect(textbox).not.to.have.attribute('placeholder');
+    });
+  });
+
   describe('prop: readOnly', () => {
     it('should make the input readonly', () => {
       render(<Autocomplete readOnly options={['one', 'two', 'three']} />);

packages/mui-joy/src/Autocomplete/Autocomplete.tsx

@@ -463,6 +463,11 @@ const Autocomplete = React.forwardRef(function Autocomplete(
     [autocompleteClasses.disabled]: disabled,
   };
 
+  let inputPlaceholder = placeholder;
+  if (multiple && (value as Array<unknown>).length > 0) {
+    inputPlaceholder = undefined;
+  }
+
   const [SlotInput, inputProps] = useSlot('input', {
     className: [classes.input, inputStateClasses],
     elementType: AutocompleteInput,
@@ -488,7 +493,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(
     ownerState,
     additionalProps: {
       autoFocus,
-      placeholder,
+      placeholder: inputPlaceholder,
       name,
       readOnly,
       disabled,