Background
Over at Process Street we're on the tail end of an integration with Algolia to manage global search functionality.
Working on a shape up style team with two people on the back-end, one on design, and one on the front-end (me), we had a little over two weeks to implement a small batch pitch to get global search rolled out.
Once we got the feature working, we got some feedback.
I wish I could use keyboard commands to go up and down the list and then hit enter to go to that link.
Totally makes sense. A UX instinct we have from the many modals we interact with like Apple's Spotlight, Alfred, and most Algolia-powered search modals.
We're using Chakra UI to implement our design system and power our new features. I assumed that there would be a preconfigured way to use keyboard controls on a modal. Alas, nothing in the modal docs hinted at keyboard controls for a list.
It didn't take long for me to realize I had concluded hastily that Chakra would have that behavior out of the box. The fact that a modal contains a list of items is my choice as the consumer of the modal. A modal isn't designed just for lists.
So then I thought:
Wait a second, how is Chakra's own documentation search modal implemented?
Inspecting the modal with dev tools quickly revealed an ARIA role I had never even heard of: the listbox. Digging even further, I found that Chakra is using a third-party listbox implementation from Algolia's DocSearch project. DocSearch doesn't fit Process Street's proprietary use case, so I decided to dig in and manage our own listbox.
A listbox is like an "ejected" select component. It's an interface for choosing one or more options from a list. Surprisingly, I didn't find much written on implementing these from scratch in React or in other JS ecosystems. Therefore, I stitched together a few different resources to create a hook that manages the effects and state for a listbox component.
The shiny code
I think for certain problems, it's better to share the code and context than to package it up as yet-another-npm-module that requires upkeep.
Here is a sandbox with the hook's implementation and test.
Maybe Chakra would be open to adding this hook to their library 😉.
Thank you! Happy problem solving ✌️
Top comments (2)
Really nice to see Mike. Thanks for sharing your thought process!
The hook looks interesting, I think you're in the right direction. With a few tweaks to it, it might be a good candidate for Chakra UI 😉.
Great work!
Thanks, Segun! Maybe I'll submit a PR and manage the conversation and tweaks there 😊