Set focus to Dropdown elements

[aryanshridhar]

Hey , Is it possible to set focus to the dropdown elements through which the user can navigate the list using arrow up/down key.

Similar issue is often occurred in electronjs website (which uses instantsearch) where users are unable to navigate through the list (after searching) using up/down arrow keys.

[eunjae-lee]

Hello @aryanshridhar
Do you mean a dropdown like this?

If you're already using InstantSearch for such UI, it'd be helpful to know how you have implemented it (like a little bit of your code snippet).
If you are starting to implement something new, then autocomplete can be a good fit for you. You can also mix it with InstantSearch, too.

It really depends on what you're building. Let me know what your case is :)

[aryanshridhar]

Yeah @eunjae-lee , As of now the user can't navigate through the above dropdown items using arrow keys .

Expected :

Is it possible to handle keyboard focus events with it ?

Edit : One way to tackle this scenario , is it to write custom focus event binding it appropriately with dropdown scrollTop/scrollBottom methods within onResults function .

[eunjae-lee]

InstantSearch.js doesn't ship something like that out of the box. You can still add an event listener to your window to capture key events and apply a specific className to an item for highlights.

However as I said before, I recommend you to try out autocomplete which has all those experience implemented out of the box.

You can implement dropdown experience like this:

[aryanshridhar]

Cool ! Thanks for it 👍 , Will look into autocomplete .

[eunjae-lee]

Let me know if you need any help! :)