Search results are obstructed when moving up through the list

[golota60]

Description

hey! thanks for this awesome library. downstream issue: https://github.com/react-bootstrap/react-bootstrap/issues/6437

The issue is pretty self-explanatory. When you move through the search results using arrow keys so that you scroll up, search results are obstructed by the sticky header.

It seems to me that it's happening cause the upstream autocomplete library is using scrollIntoView and scrollIntoViewIfNeeded which don't account for the sticky header. This has to be fixed upstream(by possibly allowing to pass an offset?). I've created this issue to track the fix here once upstream makes it possible to be fixed.

Steps to reproduce

1. Go to https://docsearch.algolia.com/
2. Click on the search button in the upper right corner.
3. In the modal that is shown, input something so that the list gets populated with results
4. Use arrow keys to navigate to the bottom of the modal
5. Use arrow key up to go up through the list so that the list scrolls upwards
6. The results that are being scrolled into view are not fully shown due to the sticky header

Live reproduction:

docsearch-bug.webm

Expected behavior

Elements should scroll underneath the sticky header so that they're visible

Environment

• OS: Linux
• Browser: Chrome 103
• DocSearch version: 3.2.1

[golota60]

Upstream discussion thread: https://github.com/algolia/autocomplete/discussions/1019

[sarahdayan]

This seems to be a Chrome behavior, Firefox scrolls differently:

https://user-images.githubusercontent.com/5370675/191471876-7e191e72-2c5c-41f3-9f55-bd6459115bf5.mov

Could the scroll-margin-top CSS property help here? That could be implemented in DocSearch (cc @shortcuts).

[golota60]

Yeah, this prop seems to be fixing the issue - will create a PR shortly. Thanks!