Accessible search bar with arrow keys

[NadjaKanunnikow]

We tried to implement a navigation through our search history with arrow key - for more accessibility. At the moment we are struggling with setting the focus on the single last search items of the search history.
In the index.js in line 135 and line 136 should happen the same thing - onMouseDown and onKeyDown. But the onKeyDown never reacts - not even as a console.log. We think it could be something about the fact that the focus is always at the SearchBarInput.
We looking for a solution navigating with the arrow keys - not the tab.

Current State

Any suggestions are very welcome!

[onemanwenttomow]

Could this be a browser issue? When i test it in chrome i see the logs. Which browser are you using?

[NadjaKanunnikow]

Hey there, thank you for your idea - it was a localStorage problem.
So now we got the drop down menu to work and go through the last search items and change the styling, but we are not able to select one of the items with enter to start the search. We can do it only on click. How can we trigger the search on enter while going through the search history? We tried to console log the "enter" in line 95, but it isn't displayed in the console.

Any suggestions are very welcome.

PeetThesing/capstone-project_snippet-manager#61

[onemanwenttomow]

From what i can see there are 2 things we need to look at.

1. We need to do one thing if it is a "normal" search. If not, i.e. the user is scrolling through the history then we want to do another thing.
2. We need to figure out what search term is the one currently being highlighted (i.e. at the currentIndex). Once we have that search term we can do what we like with it... i.e do a new fuse search or update the value on your inputRef etc.

if (event.key === "Enter" && currentIndex === -1) {
      updateLastSearches(searchTerm);
    }
if (event.key === "Enter" && currentIndex >= 0) {
  const newSearchTerm = lastSearches[currentIndex];
}

Hopefully this helps.

[NadjaKanunnikow]

Hey there, thank your for your input! We finally made things work with a very similar approach. 🚀