algolia / algolia/autocomplete

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

Open
#763 5 comments 2 reactions 0 assignees View on GitHub
Status: Needs Investigation
Dominant language
TypeScript
Stars
5.3k
Forks
341
Avg merge
3d 1h
Merged PRs (30d)
5

Description

## 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).

Screenshot 2021-10-11 at 16 11 22

## Reproduction

[**Preview →**](https://codesandbox.io/s/github/salomvary/autocomplete/tree/panel-positioning-bug/examples/panel-placement?file=/app.tsx).

**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

Contributor guide

Open the contributing guide

Research direction

Start with the linked CodeSandbox reproduction at examples/panel-placement, especially app.tsx, and enable both “Custom panelContainer” and “Positioned” before searching. Trace the panel-positioning path from that example and compare the panel and input coordinates. Done means the panel appears below the search input when the custom container is inside an absolutely positioned element.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.