Autocomplete's listbox Paper defaults to elevation 1, while Select/Menu's Popover defaults to elevation 8 — inconsistent shadow between components with the same UI role
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 this link to live example: https://stackblitz.com/edit/gn7fmuvs?file=src%2FDemo.tsx
- Compare the box-shadow of the open Select's Menu Paper vs. the open Autocomplete's listbox Paper
Current behavior
The Select's Menu Paper defaults to `elevation={8}
The Autocomplete's listbox Paper renders with no explicit elevation passed in paperProps, so it falls back to Paper's own default of elevation={1}:
Two components that serve the same UI purpose — a floating list of selectable options anchored to a field — render with visibly different shadow depth by default.
Expected behavior
Either:
- Autocomplete's listbox Paper should default to the same elevation as Select/Menu's Popover (8), since both are "floating option list" surfaces anchored to a field
and are commonly used interchangeably in the same UI (e.g. a filter bar mixing plain Selects and Autocompletes), or - If the difference is intentional (e.g. Autocomplete is meant to read as a lighter-weight surface), this should be documented, so it's clear the mismatch has to be
fixed manually viaslotProps={{ paper: { elevation: 8 } }}when visual parity with Select is wanted.
Context
No response
Your environment
Search keywords: autocomplete elevation, autocomplete shadow, autocomplete paper elevation, select menu popover elevation, autocomplete vs select shadow
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 with the linked StackBlitz reproduction in src/Demo.tsx and compare the Autocomplete listbox Paper with the Select/Menu Popover. Inspect the existing Paper defaults and slotProps API, then confirm the intended relationship between their elevations. Done means the default behavior is consistent or the intentional difference is documented, with the reproduction reflecting that decision.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react
- Domain
- design, frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Active
- Clarity
- Mostly clear
- Newbie friendliness
- 58/100