Typeahead is not working correctly with virtualised select

[patrikholcak]

Current behavior

I know the <SelectRenderer /> component is still experimental, but while implementing it, I discovered that typeahead isn’t working for items that aren’t rendered. I noticed #3535 and tried to update to newer version but it still didn’t work. My use case doesn’t allow for rendering combobox, because the performance isn’t as great as with selects (as noted in #3451)

On the topic of typeahead, I’m also thinking if matching the value of the item (as opposed to the option label users see) is the right choice, because for example with countries, Switzerland might have a value of ch and typing Swi… wouldn’t work.

Steps to reproduce the bug

1. Open https://stackblitz.com/edit/github-vjvhs5-d9z3gk?file=src%2FApp.tsx
2. Open the select
3. Try typing "G" for Germany or any other country below the fold

Expected behavior

The select has knowledge of all items using the defaultItems prop to <SelectProvider /> (or useSelectStore) so it should be able to guesstimate the position in the list and scroll.

Workaround

—

Possible solutions

We should probably use the items state here if its length is greater than the length of renderedItems:

ariakit/packages/ariakit-react-core/src/composite/composite-typeahead.ts

Lines 132 to 137 in 771ba3e

	// We typically want to use the rendered items, as they're already sorted.
	// However, the composite list might be unmounted or virtualized, in which
	// case we'll use the original items.
	let enabledItems = getEnabledItems(
	renderedItems.length ? renderedItems : items,
	);

[diegohaz]

Steps to reproduce the bug

1. Open https://stackblitz.com/edit/github-vjvhs5-d9z3gk?file=src%2FApp.tsx
2. Open the select
3. Try typing "G" for Germany or any other country below the fold

It's possible that #3535 has broken the typeahead functionality on virtualized lists. If you test your reproduction with v0.4.1, it works as expected.

On the topic of typeahead, I’m also thinking if matching the value of the item (as opposed to the option label users see) is the right choice, because for example with countries, Switzerland might have a value of ch and typing Swi… wouldn’t work.

CompositeTypeahead uses value as a fallback. It will check the rendered element's textContent and the item's children properties first.

[patrikholcak]

Yup, downgrading works for now. Thanks!