ComboBox: infinite scroll

[saskliutas]

Hi, we have a use case where we show a ComboBox with huge amount of options that are delay loaded in pages. At the moment we are using react-select-async-paginate package that underneath uses react-select component. We try to style it to look like ComboBox from iTwinUI. However, I would like to switch to iTwinUI ComboBox to make sure that styling is consistent.

I was wondering if there are any plans on adding support for infinite scroll in iTwinUI ComboBox? I didn't see an ability to invoke some function to load more options when dropdown menu bottom is reached. I think it should be enough to expose a callback like onBottomReached.

I tried playing around with iTwinUI ComboBox and managed to reach somewhat similar workflow with fake Load More option at the bottom of dropdown menu but I don't know if this is a good approach. (I didn't try to make filtering work but I think it's possible to achieve) https://stackblitz.com/edit/github-ggmupd?file=src%2FApp.tsx

[mayank99]

Hey, can you share more details about your use-case? Infinitely loading the options in ComboBox feels like an anti-pattern to me. Can't you just load the top N results for every search term (using a custom filterFunction)? The user would then type a few more characters to get more relevant results, avoiding the need to scroll infinitely.

[saskliutas]

We have a component that allows user to build filter conditions to reduce amount of results shown in various contexts. Filter condition consist of property, operator and value. In case user choses Equal/Not Equal operator we show ComboBox with unique values of selected property. In some cases we might encounter a huge amount of unique values so we used infinite scroll to allow scrolling through them. We also allow to filter the dropdown.

I like your suggestion to limit dropdown to some predetermined size and direct user to use filtering. I think this is the we should go. Do you have any suggestions on how to inform user that not all available values are shown in dropdown? Should we say that in placeholder text or add disable option at the end of dropdown list to let user know that more values are available and some search term should be entered?

[mayank99]

This is a design question, which does not have a straightforward answer. Usually, these questions require UX research and testing to find good solutions for.

Placeholder text is not reliable because it disappears whenever the input has any value inside it (among other reasons). Disabled option is a little better, but it is still not great, because it gives the impression that it is an option that can be clicked. One alternative might be to show a simple message below the combobox input.

[saskliutas]

Thank you for your suggestions. I think I have enough to start working on this and experiment.