mui / mui/material-ui

[autocomplete] Autocomplete Popper position breaks when container height changes

Open
#44,797 2 comments 6 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

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

Description

Steps to reproduce

Steps:

  1. Open this link to live example: https://codesandbox.io/p/sandbox/fnxpf9
  2. Choose at least one of the options in the Autocomplete
  3. Autocomplete's Popper's position is not recalculated properly

Important: The issue can only be observed if disableCloseOnSelect is set to true

Current behavior

Popper position stays the same and does not follow the input. When a condition is met that collapse is retracting, popper's position gets recalculated to the where it should have been on the previous render

Expected behavior

Popper should "stick" to Autocomplete input no matter the Autocomplete position

Context

I am aware of the fact that Popper's position for Autocomplete is always 'fixed'. I have tried to use slotProps to set transition: true for the popper, but it causes it to default to top left position of the screen regardless of anchorEl if disablePortal=true. It also starts throwing warnings that "Empty string was passed to getElementById" from useAutocomplete.ts (which I'm not using).

The reason I was trying to use the transition prop is that from my many attempts to fix this, I've got one case where it did fix the issue, but I could not reproduce it since then. In any case this is very frustrating.

Browsers: Firefox, Chromium

Your environment
npx @mui/envinfo
System:
    OS: Linux 6.11 Manjaro Linux
  Binaries:
    Node: 20.11.1 - ~/.nvm/versions/node/v20.11.1/bin/node
    npm: 10.2.4 - ~/.nvm/versions/node/v20.11.1/bin/npm
    pnpm: 9.10.0 - /usr/bin/pnpm
  Browsers:
    Chrome: Not Found
  npmPackages:
    @emotion/react: ^11.11.4 => 11.13.3 
    @emotion/styled: ^11.11.5 => 11.13.0 
    @mui/base: ^5.0.0-beta.66 => 5.0.0-beta.66 
    @mui/core-downloads-tracker:  6.2.0 
    @mui/icons-material: ^6.2.0 => 6.2.0 
    @mui/lab: 6.0.0-beta.19 => 6.0.0-beta.19 
    @mui/material: ^6.2.0 => 6.2.0 
    @mui/private-theming:  6.2.0 
    @mui/styled-engine:  6.2.0 
    @mui/system: ^6.2.0 => 6.2.0 
    @mui/types:  7.2.19 
    @mui/utils:  6.2.0 
    @mui/x-data-grid: ^7.15.0 => 7.22.2 
    @mui/x-date-pickers:  7.22.2 
    @mui/x-internals:  7.21.0 
    @types/react: ^18.2.79 => 18.3.12 
    react: ^18.2.0 => 18.3.1 
    react-dom: ^18.3.0 => 18.3.1 
    styled-components: ^6.1.8 => 6.1.13 
    typescript: ^5.4.5 => 5.6.3 

Search keywords: autocomplete popper collapse transition

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 CodeSandbox and reproduce the Autocomplete case with disableCloseOnSelect set to true while the container height changes. Trace the Autocomplete Popper positioning and its anchor updates, then verify that the Popper remains aligned with the input during collapse and retraction in both Firefox and Chromium.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, react
Domain
frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.