algolia / algolia/docsearch

Using keyboard to navigate on results modal don't move to correct anchor, clicking works correctly.

Open
#1,283 0 comments 0 reactions 0 assignees View on GitHub
Needs investigation
Dominant language
TypeScript
Stars
4.4k
Forks
439
Avg merge
14h 32m
Merged PRs (30d)
19

Description

## Description

When opening the modal and navigating the search result, if `enter` is pressed, nothing happens.

The URL in the browser is updated with the correct version.

If I click on the result, the page scroll as expected.

It only happens if the result I click on / press `enter` on is on the current page.

Safari version: 15.2 (but same behavior on Chrome and Firefox)
Docsearch version: 3.0.0-alpha.42

https://user-images.githubusercontent.com/7622246/151197600-820945d0-d9ec-4ea3-97e1-688483d627aa.mov

## Steps to reproduce

1. Open Safari 15.1
2. Go to [https://www.scrapingbee.com/documentation]
2. Type `cmd + K` to open the modal
3. Type `headers` to see the result
4. Navigate with keyboard, press `enter` nothin happens
5. Click on the result instead, you are redirected

Same bug on Vue.js doc, which makes me think that the problem is not our implementation
1. Go to https://v3.vuejs.org/api/instance-properties.html
2. Search for `$el`
3. Navigate with keyboard and press `enter` doesn't work
4. Click on the first result, it works
![image](https://user-images.githubusercontent.com/7622246/151198717-3c7f1557-fa38-4183-adf8-40032a178178.png)

**Live reproduction:**

https://www.scrapingbee.com/documentation

## Expected behavior

It should scroll to the correct anchor when pressing `enter`

## Environment

- OS: macOS 12.1
- Browser: Safari (but same behavior on Chrome and Firefox)
- DocSearch version: 3.0.0-alpha.42

Contributor guide

Open the contributing guide

Research direction

Reproduce the keyboard-selection failure at the ScrapingBee or Vue documentation URLs using DocSearch, then trace the results modal and its Enter-key handling. Done means selecting a result with the keyboard scrolls to the correct anchor, matching the existing click behavior, in Safari, Chrome, and Firefox.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend, search
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.