FloatingPopup + Autocomplete

<Autocomplete slots={{ popper: FloatingPopup }} />

Basic

Default (Popper.js)

FloatingPopup

disablePortal

Inside scroll container

Dropdown flips when there is not enough space below.

Multiple values

The Shawshank Redemption
The Dark Knight

Grouped

Free solo

CSS variables (--anchor-width)

The dropdown uses var(--anchor-width) to match the input width. Autocomplete already passes style.width via additionalProps, but the CSS variable is also available.

keepMounted (via slotProps)

The dropdown stays in the DOM when closed (inspect to verify).