Search results are obstructed when moving up through the list
- Dominant language
- TypeScript
- Stars
- 4.4k
- Forks
- 439
- Avg merge
- 14h 32m
- Merged PRs (30d)
- 19
Description
## 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](https://github.com/algolia/autocomplete) is using [scrollIntoView and scrollIntoViewIfNeeded](https://github.com/algolia/autocomplete/blob/5ba25f62213b2721218fb34ecc9472286cb9f926/packages/autocomplete-core/src/onKeyDown.ts#L32) 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](https://user-images.githubusercontent.com/37072867/191042474-5cf4001b-ffdc-48a8-90ae-d253de919f95.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
Contributor guide
Research direction
Reproduce the issue at docsearch.algolia.com using the listed arrow-key steps, then inspect the upstream autocomplete packages/autocomplete-core/src/onKeyDown.ts reference for its scrollIntoView behavior. The issue is considered done only when upstream supports accounting for the sticky header and DocSearch can use that support so results remain visible.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- frontend, search
- Issue type
- Bug
- Difficulty
- 4/5
- Estimated time
- 3-5 days
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100