[select] Integration with virtualization libraries

[brianle1301]

Feature request

Summary

I wanted to make Select.Popup a virtualized list. Works fine with mouse/pointer navigation, but keyboard navigation wouldn't focus on items past the virtualization window. This is a tricky issue to workaround, because Select builds its internal options array from Select.Item children, and only a handful are rendered at a time.

My suggestion would be to have an optional prop to hint Select of all of the options (or the total option count), and expose a way to get the current focused index, which can be used to scroll the virtualized window to that item.

Examples in other libraries

react-select has the options props, but their API philosophy is different to that of headless libraries:

 <Select
        className="basic-single"
        classNamePrefix="select"
        defaultValue={colourOptions[0]}
        isDisabled={isDisabled}
        isLoading={isLoading}
        isClearable={isClearable}
        isRtl={isRtl}
        isSearchable={isSearchable}
        name="color"
        options={colourOptions}
      />

Motivation

This is useful for rendering long lists or do infinite scrolling

[brianle1301]

On second thought, this maybe better suited for the upcoming Combobox component instead. Would love some opinion

[atomiks]

On second thought, this maybe better suited for the upcoming Combobox component instead. Would love some opinion

Yeah, selects shouldn't need to be virtualized because they shouldn't contain more than a few hundred options. Having to scroll through a giant list without a search filter is poor UX, even if the basic (non-obvious) typeahead is available.

[dartess]

I also tried adding virtualization to the select with the search field using @tanstack/react-virtual. everything looked working with mouse, but with keyboard navigation broke: the focus jumped through the elements. As a result, my select only looks like a select.
Maybe the combobox will really be useful, but I've seen extremely few examples of comboboxes in real interfaces, and frankly speaking, I don't understand how it will solve the main problem — lags when rendering large lists (the list of options can remain large even after filtering starts).

[atomiks]

but I've seen extremely few examples of comboboxes in real interfaces

I'm not sure I understand - comboboxes are arguably the most common UI component found in web apps aside from buttons. GitHub itself uses them everywhere. As soon as you have a moderately large select, it usually changes into a combobox because the typeahead search filtering is much more obvious and user-friendly

lags when rendering large lists (the list of options can remain large even after filtering starts).

The Base UI Combobox component should support virtualization, but when avoiding it you can limit the options displayed in the Combobox to e.g. 100-200. So even if a match is found, the least relevant match would be truncated until the query becomes more precise to show it

[dartess]

I'm not sure I understand

I'm not sure either :) perhaps I'm a bit lost in the terminology.

The Base UI Combobox component should support virtualization [...]

Thanks for the clarification. My select-with-search is probably should be a combobox. I'll keep an eye out for the new component and try to use it!

(I also just realized that there really is no point in having keyboard navigation on a 300 item options list.)

[atomiks]

Haha yes, perhaps. A combobox is an input combined with a list - the input usually filters the list to show matches relating to the query. The list can be in a popup or inline (such as in another popup).

You can take a look at all the combobox examples in the WIP PR: https://deploy-preview-2105--base-ui.netlify.app/react/components/combobox#examples