mui / mui/material-ui

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

Open
#48,933 8 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

breaking change has workaround scope: autocomplete
Dominant language
JavaScript
Stars
99.1k
Forks
32.5k
Avg merge
2d 17h
Merged PRs (30d)
106

Description

Steps to reproduce
  1. Open this link to live example: https://stackblitz.com/edit/gn7fmuvs?file=src%2FDemo.tsx
  2. Compare the box-shadow of the open Select's Menu Paper vs. the open Autocomplete's listbox Paper
Image
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 via slotProps={{ 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

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 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.