Skip to content

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

Closed

Description

@trabati

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

Activity

  1. added
    has workaroundThere’s a bug, but users have a complete workaround, so no urgent fix or release is needed.
    and removed on Aug 6, 2026
  2. silviuaavram commented on Aug 6, 2026

    @silviuaavram
    Member

    So there's a workaround. We should decide if we want to go for consistency and do the change.

  3. silviuaavram commented on Aug 7, 2026

    @silviuaavram
    Member

    This is a breaking change. Might consider it for the next major.

  4. added
    breaking changeIntroduces changes that are not backward compatible.
    scope: autocompleteChanges related to the autocomplete. This includes ComboBox.
    on Aug 7, 2026
  5. namansancheti commented on Aug 28, 2026

    @namansancheti

    @silviuaavram
    I would like to work on this - can you please clarify the Expected behavior ?
    Will then go ahead and raise PR.

  6. silviuaavram commented on Aug 31, 2026

    @silviuaavram
    Member

    The expected behavior is detailed in the description.

  7. namansancheti commented on Aug 31, 2026

    @namansancheti

    @silviuaavram
    Thanks for your response - while the expected behavior is detailed in the description, there are two options proposed:

    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.

    So, was looking for guidance / confirmation on which of the two proposals is recommended ?
    Will then go ahead and raise PR for the recommended approach.

  8. namansancheti commented on Sep 2, 2026

    @namansancheti

    @silviuaavram
    Can you please assign this issue to me ?

    Will raise PR for both the approaches (update default elevation, and Docs update) for your review.

  9. silviuaavram commented on Sep 7, 2026

    @silviuaavram
    Member

    @namansancheti you can go ahead, just keep in mind that the changes won't land immediately, since they are breaking changes.

  10. namansancheti commented on Sep 7, 2026

    @namansancheti

    @namansancheti you can go ahead, just keep in mind that the changes won't land immediately, since they are breaking changes.

    @silviuaavram
    Thank you for confirming 👍

    I have raised the PR - please review, when you get a chance:
    #49110

    Happy to make required changes (if any).

  11. github-actions commented on Oct 7, 2026

    @github-actions
    Contributor

    This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
    Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.


    @trabati Thanks again for creating this issue! If you have a moment, we would love to hear your thoughts on how we handled it with this short feedback form.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    breaking changeIntroduces changes that are not backward compatible.has workaroundThere’s a bug, but users have a complete workaround, so no urgent fix or release is needed.scope: autocompleteChanges related to the autocomplete. This includes ComboBox.

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions