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.
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
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 ✌️