Autocomplete box doesn't work with fixed positioning

[andrewmkhoury]

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:

autocomplete/packages/autocomplete-js/src/getPanelPlacementStyle.ts

Line 25 in 5fd58f6

const top = scrollTop + containerRect.top + containerRect.height;

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:

• CSS

:root {
    --position-autocomplete-panel-top: 52px;
}

.aa-Panel {
    position: fixed;
    top: var(--position-autocomplete-panel-top) !important;
    z-index: 1000;
}

• JS

    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);

Reproduction

My Sandbox: https://codesandbox.io/s/youthful-microservice-6km8p4?file=/style.css:843-880

Steps

1. Add this change to the css of the sandbox:

#autocomplete {
  position: fixed;
}

2. Now see that the search field follows you while you scroll in the frame
3. When you click in the search field then scroll you will see weird behavior. See screenshot below:
   

Expected behavior

It should be possible to make fixed positioning work without a CSS hack using !important.

Environment

• OS: macOS
• Browser: Chrome
• Autocomplete version: 1.11.1

[linonetwo]

Thanks for the hack!