[autocomplete] Autocomplete Popper position breaks when container height changes
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
Steps:
- Open this link to live example: https://codesandbox.io/p/sandbox/fnxpf9
- Choose at least one of the options in the Autocomplete
- 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
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 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