Bug - Select - performance issue with typeahead

[mhuin]

Describe the problem Using a Select with typeahead can cripple performance if there are a large amount of options. The browser becomes unresponsive when typing in the select box (Tested on Firefox and Chrome in Fedora 35).

How do you reproduce the problem? I am hitting the problem with 2000+ options in the select.

Expected behavior The browser shouldn't freeze when typing in the box.

Is this issue blocking you? It'd be nice for end users to be able to filter through large amounts of options with the typeahead feature.

[nicolethoen]

Hello @mhuin! Thank you for opening this issue! It is definitely true that the typeahead select was not built with the intended use case of hosting 2000+ options.

Your use case may be better served with something like this Search with autocomplete demo.

We are also in process of showing how to build a composable typeahead search that will be much more flexible for building autocompletes - so it'd basically be just like the Search with autocomplete demo without a search icon in the input field.

All of the components need to build the demo I'm mentioned above do exist, so you could build it yourself using a TextInputGroup - the scaffolding for that would be similar to this Text Input Group demo - just without the attribute/value feature.

[mhuin]

Thanks for the suggestion, however it seems the solutions here would still have a problem with scaling up to a large amount of children. Tries are a great data structure for typeahead lookups, maybe it'd be worth looking into using them in Select.

[nicolethoen]

In fact, I believe the Menu component used to render MenuItems in the SearchInput and TextInputGroup demos can be implemented using Tries. That'd be up to you as the consumer to build them optimally. The Menu component gives much more flexibility for implementation options.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.