Component for a lookup type interaction

[PoojMenon]

Hi,

We have a use case where user can lookup an item based on an ID or a friendly name. We can't use a combobox as there could be 1000s of items in that list pre-search. Is there a paste component to achieve this out of the box?

Screen.Recording.2021-08-11.at.18.33.57.mov

[gloriliale]

Hi @PoojMenon! Could you tell me a bit more about how this works currently? For example, what the behavior is while you're typing in this field (as opposed to copy/pasting)?

[PoojMenon]

Hi @gloriliale

I've added an updated recording to give you a better idea of the interaction. To give you a bit of extra context, there are essentially 1000s of items in the system. The input control in the recording only starts showing you options if you enter at least 3 characters, and it seems to show ~20 options in the list as you type.

[nkrantz]

Thanks for the context, @PoojMenon! We don't have any ready-to-use combobox-like components that will perform an API fetch to load data, but here are a couple of options that you could try:

1. As long as you're not using the optionTemplate prop, our Combobox component will perform lazy rendering of your list items which will visually look like it's lazy loading the data. You could give this option a try to see if the performance is feasible, and if not,
2. Your best bet is probably to use the Combobox Primitive. Your team can use the primitive to build a custom combobox component that dynamically fetches data to save on performance. Downshift has an example in this codesandbox using Axios that you can check out. Click on the "Current module view" button (screenshot attached) to view the example.

I hope this helps! Please keep us updated, especially if you take the primitive route 😄 We'd love to see what you build!

[PoojMenon]

Hi Nora,

Thanks for the response. I think the screenshot you mentioned is missing.

I also noticed that there is similar functionality in the console zen masthead. Would something like this be okay to use? We can show the empty state until the user types a few characters. Can we use the combobox to achieve this?

[nkrantz]

Whoops, sorry about that! Screenshot below.

Showing an empty state in your combobox is definitely an option and the Console screenshot you shared is using a Paste Combobox. Here's the implementation.

[PoojMenon]

Thanks for the screenshot Nora. And the implementation link you shared is giving me a 404 error - is it just a permission issue?

[nkrantz]

Ah yes, the engineers on your team should probably already have access to the console repo, but I believe you can request access through ServiceNow.

[PoojMenon]

Perfect - thank you!