Panel positioning is wrong in an absolute positioned form when panelContainer is used

[salomvary]

Description

When the autocomplete form and input is placed in an absolute positioned container (eg. a modal dialog) and a custom panelContainer is used (pointing to an element in the same absolute positioned container), the panel is misplaced (towards bottom-right).

Reproduction

Preview →.

Steps

1. Check "Custom panelContainer" and "Positioned" checkboxes
2. Search for something in any of the search boxes

Expected behavior

Even when custom panelContainer is used inside an absolute positioned element, the panel should be placed below the search input.

Environment

• OS: macOS, likely not specific
• Browser: Firefox, likely not specific
• Autocomplete version: 1.4.0, next

[nkostadinov]

I have the same issue.

[francoischalifour]

Thanks for opening the issue.

Internally we compute the top and left positions of the panel based on the search box', and apply them on the style of the element (.aa-Panel). This, no matter their parent's position.

I guess a solution would be to detect the parent's position and add the style conditionally.

[mprythero]

This still appears to be an issue.

[salomvary]

Seems to be a problem with native modal <dialog> elements too, which are not absolutely positioned but are on the top layer: https://codesandbox.io/p/sandbox/peaceful-feather-fs7d56

[salomvary]

Bad news, positioning is still broken when in a scrollable container. Reopen this one or open a new issue?

This is the non-positioned example: