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 π