autocomplete Autocomplete box doesn't work with fixed positioning

Autocomplete box doesn't work with fixed positioning

Open andrewmkhoury opened this issue 1 year ago • 1 comments

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:

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

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

    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

Add this change to the css of the sandbox:

#autocomplete {
  position: fixed;
}

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