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,