Async Search Combobox

[kayleenovak]

Hi there!

My team and I are working on building out an async combobox for searching. One of the things we noticed is that the Combobox always expects data, even on focus of the Combobox. What is the intention behind always providing default data? Is it an anti-pattern to not display default data on focus and before the user has input characters?

For our particular case a user is searching for an account to impersonate. If we did provide default data, it would be the same list as provided right below under All Accounts, which seems a bit unhelpful providing the same accounts again.

We would also appreciate any direction/good practices when it comes to implementing an async combobox.

Thanks for the help in advance! 😄

[loreina]

Hi @kayleenovak, this is great timing because we're actually working on Combobox right now and exploring what a loading state, async fetching, and a search variant would look like.

Currently, the Combobox menu opens on focus to a static list of items. Console uses the input as a search, where the menu opens to an empty state when there are no options to display.

Could you share more about how you're using Combobox in the screenshot? How would options be displayed when the user inputs? Would it filter through the options listed below or would the menu display options once there's input? If you have a prototype or design files for this, that would be really helpful. Thanks!

[blangwilky]

The search box narrows down what could be a very long list. We load the first 10 users upon visit to the page, and can load more (10 each time) for the list to keep growing. Some parent/admin accounts could potentially have hundreds of subusers, so our search box will narrow down the list as they are typing, and display matched users. Does this help?

[loreina]

Would the search box be using the menu that opens with the Combobox or would the search box filter the cards below "All Accounts"? What does the loading state look like while you're loading more accounts on the page?

[kayleenovak]

Hey @loreina! I've attached a video of how we are using it currently, I can also link the code if you'd like. It displays the loading and no results as well. We are wondering if not displaying any results (empty state) on focus of the combobox is an accepted approach as seen in the video? Also wouldn't mind additional feedback 😄

combobox.demo.mov

[loreina]

@kayleenovak, thanks for sharing the video that was super helpful! If you're able to share a link to the code, that would be great too!

To answer your question about always providing default data, the way Combobox is implemented allows for displaying a static list of data, though we're aware that there's a need for async fetching, or not displaying a list of items at all. It's not an anti-pattern per se, just features that we haven't implemented and are currently considering in our next release of the multi-select combobox.

There are other teams that have also built a combobox with async functionality, you can check out these discussions #1762 and #1208 for more context.

Our team can follow up here when the multi-select combobox component is released and if there's any guidance on an async variant. Let us know if you have other questions in the meantime. :)

[loreina]

Multi-select Combobox is available in Paste and we have a ticket in our backlog to implement lazy loading, though the designs for that guidance is already available in Figma. Thanks!