[joy-ui][Autocomplete] Placeholder persists when values are selected in multiple mode
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
Steps to reproduce
- Open the Joy UI Autocomplete docs: https://mui.com/joy-ui/react-autocomplete/#multiple
- Add a
placeholderprop to the multiple Autocomplete, e.g.:
<Autocomplete
multiple
placeholder="Select items"
options={['Apple', 'Banana', 'Cherry']}
/>
- Select one or more values
Current behavior
The placeholder text remains visible alongside the selected chips. The placeholder is passed unconditionally to the internal <input> element's additionalProps:
Since the input's value is always empty in multiple mode (selected values render as chips, not input text), the HTML placeholder never clears.
Expected behavior
The placeholder should be hidden when one or more values are selected, matching the behavior of Joy UI's Select component which was fixed in https://github.com/mui/material-ui/pull/39806.
Context
The fix in #39806 addressed this for Select but was not applied to Autocomplete.
Your environment
System:
OS: macOS 26.2
Binaries:
Node: 24.11.0
npm: 11.6.1
Browsers:
Chrome: 144.0.7559.133
Safari: 26.2
npmPackages:
@mui/joy: 5.0.0-beta.52
@emotion/react: 11.14.0
@emotion/styled: 11.14.1
react: 17.0.2
Order ID: N/A (open source usage)
Search keywords: joy autocomplete placeholder multiple chips
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start in packages/mui-joy/src/Autocomplete/Autocomplete.tsx around the internal input additionalProps referenced in the issue, then compare the placeholder handling with the Select fix in pull request #39806. Verify the multiple Autocomplete reproduction with selected chips; done means the placeholder is hidden after one or more values are selected.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 57/100