tay1orjones
commented
1 year ago Hey @michaelb-ignition - yes, virtualization of the list isn't built in to the Dropdown components using downshift.
If you're running into issues with large data sets within the Dropdown you have a few options:
- Use Select instead. It uses the browser chrome for the list and is significantly more performant. There is an upper limit on the number of
options that can be placed within a Select - this limitation is imposed by the browser. - Reuse the styles provided for Dropdown to create your own Dropdown using Downshift and a windowing solution like
react-virtual
I'm not opposed to the idea of adding a way to toggle virtualizing of the list within Dropdown, but so far no one has taken up that task or provided ideas of how it would work. The largest complicating factor is that it would likely require refactoring the internal ListBox components. ListBox not only powers Dropdown, but also MultiSelect, FilterableMultiSelect, and ComboBox. The surface area for virtualizing the list is large and we'd want to get it right.
Off the top of my head - one path that might make sense would be to include ListBox as part of the public API (https://github.com/carbon-design-system/carbon/issues/6177) and provide a way to swap out the stock ListBox for a custom one you build yourself. This would allow you to make the changes you need without having to recreate the entire Dropdown. Happy to discuss it further if you're interested!
michaelb-ignition
We are finding significant performance issues using the dropdown component with large items array of say a few thousand items. The carbon/react implementation is using downshift and the downshift docs provide an example using the useSelect hook along with the react-virtual library to handle large lists in a dropdown component. I can't see any of that utililsed by carbon/react though and wondered if there was another way I should be handling large data sets for dropdown lists to improve performance?