#48933·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

Author: trabatiCreated Aug 6, 2026Updated Sep 7, 2026
Labelsbreaking changescope: autocompletehas workaround

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

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