algolia / algolia/docsearch

Search results are obstructed when moving up through the list

Open
#1,572 3 comments 2 reactions 0 assignees View on GitHub
Autocomplete
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.