[BUG] - Autocomplete's List is Misplaced when Using it Inside the Popover Component

[kimskovhusandersen]

NextUI Version

2.4.8

Describe the bug

I'm rendering the Autocomplete inside a Popover component. To ensure the option list is open when the component mounts, I’m using autofocus on the Autocomplete. But by default, when the option list of the Autocomplete component opens, it renders in the wrong position (when placed inside a Popover).
As a workaround, I tried using a popoverRef for positioning, but it also seems like the portalContainer prop in popoverProps has no effect either.
The dropdown fails to align with the input field, as it seems like the popover container is not ready when the dropdown tries to position itself.

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

• Place the Autocomplete component inside a Popover.
• Render the component and interact with the input field to open the option list.

Additional Attempt

• Try using a ref as suggested in this comment.
• Pass a popoverRef to the popoverProps of the Autocomplete for positioning.

Expected behavior

The option list should align correctly with the input field and render within the bounds of the Popover.

Switching to static positioning instead of absolute could potentially resolve this, but the relevant div controlling the dropdown’s position is not accessible from outside of the component.

Screenshots or Videos

Screen.Recording.2025-01-03.at.10.57.41.mov

Operating System Version

macOS

Browser

Chrome

[linear]

ENG-1821 [BUG] - Autocomplete's List is Misplaced when Using it Inside the Popover Component