mui / mui/material-ui

[joy-ui][Autocomplete] Placeholder persists when values are selected in multiple mode

Open
#47,722 2 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

on hold package: joy-ui scope: autocomplete type: bug
Dominant language
JavaScript
Stars
99.1k
Forks
32.5k
Avg merge
2d 17h
Merged PRs (30d)
106

Description

Steps to reproduce
  1. Open the Joy UI Autocomplete docs: https://mui.com/joy-ui/react-autocomplete/#multiple
  2. Add a placeholder prop to the multiple Autocomplete, e.g.:
<Autocomplete
  multiple
  placeholder="Select items"
  options={['Apple', 'Banana', 'Cherry']}
/>
  1. 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:

https://github.com/mui/material-ui/blob/da8d6e8b2b2c7f3898af475de3a4beb6c0eaf3ab/packages/mui-joy/src/Autocomplete/Autocomplete.tsx#L521

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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.