diff --git a/packages/mui-joy/src/Autocomplete/Autocomplete.test.tsx b/packages/mui-joy/src/Autocomplete/Autocomplete.test.tsx index 8de4313c87e7ba..5473c743f98520 100644 --- a/packages/mui-joy/src/Autocomplete/Autocomplete.test.tsx +++ b/packages/mui-joy/src/Autocomplete/Autocomplete.test.tsx @@ -2421,6 +2421,29 @@ describe('Joy ', () => { }); }); + describe('prop: placeholder', () => { + it('should render placeholder when no options are selected', () => { + render( + , + ); + const textbox = screen.getByRole('combobox'); + expect(textbox).to.have.attribute('placeholder', 'Select options'); + }); + + it('should hide placeholder when options are selected', () => { + render( + , + ); + const textbox = screen.getByRole('combobox'); + expect(textbox).not.to.have.attribute('placeholder'); + }); + }); + describe('prop: readOnly', () => { it('should make the input readonly', () => { render(); diff --git a/packages/mui-joy/src/Autocomplete/Autocomplete.tsx b/packages/mui-joy/src/Autocomplete/Autocomplete.tsx index 66f8aa7777f3d6..f137225c5738ee 100644 --- a/packages/mui-joy/src/Autocomplete/Autocomplete.tsx +++ b/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).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,