The problem is that autocomplete uses absolute positioning. To fix this, I suggest to have a configuration to allow it to use fixed positioning instead.
In my project, I was able to work around this issue by doing the following:
* JS
```javascript
const fixPosition = () => {
const rect = document.querySelector('.search-field').getBoundingClientRect();
// Set css variable to be below the search box in case the search box moved when the window was resized
setCSSVar('--position-autocomplete-panel-top', `${rect.bottom}px`);
};
document.querySelector('.aa-Input').addEventListener('focus', fixPosition);
document.querySelector('.aa-Input').addEventListener('blur', fixPosition);
window.addEventListener('resize', fixPosition);
Description
When the search field has fixed positioning on the page and you scroll while the autocomplete box is open the box doesn't follow scroll. The box scrolls out of view. Related code is here: https://github.com/algolia/autocomplete/blob/5fd58f6f9cdb6d3dc7ba02eb4b9e985f5e10d8f4/packages/autocomplete-js/src/getPanelPlacementStyle.ts#L25
The problem is that autocomplete uses absolute positioning. To fix this, I suggest to have a configuration to allow it to use fixed positioning instead.
In my project, I was able to work around this issue by doing the following:
.aa-Panel { position: fixed; top: var(--position-autocomplete-panel-top) !important; z-index: 1000; }
Reproduction
My Sandbox: https://codesandbox.io/s/youthful-microservice-6km8p4?file=/style.css:843-880
Steps
Expected behavior
It should be possible to make fixed positioning work without a CSS hack using !important.
Environment