Combobox virtualized

[ducan-ne]

Hi, in the documentation, it is mentioned that the Combobox supports virtualized scrolling. I'm curious about how I can achieve that, is there any example?

https://nextui.org/docs/components/autocomplete#accessibility

Support for virtualized scrolling for performance with long lists

[ducan-ne]

I discovered that there is the "isVirtualized" prop, but it seems like it is deprecated, and only tell react-aria that we're in a virtual scrolling listbox, without actually providing the functionality.

[BrainyWayne]

Is there a solution to this?

[ducan-ne]

Sorry but no

[awestm]

@BrainyWayne

I actually did end up solving this. The autocomplete component supports async loading, you can follow the example on the docs: https://nextui.org/docs/components/autocomplete.

I won't say it's perfect and the example is a little difficult to follow, but essentially you can batch up a list of options into chunks of 50-100 and then load the next when the scroll limit is reached using useInfiniteScroll.

[BrainyWayne]

Awesome @awestm, trying this approach!

[LPSebi]

@BrainyWayne

I actually did end up solving this. The autocomplete component supports async loading, you can follow the example on the docs: https://nextui.org/docs/components/autocomplete.

I won't say it's perfect and the example is a little difficult to follow, but essentially you can batch up a list of options into chunks of 50-100 and then load the next when the scroll limit is reached using useInfiniteScroll.

@awestm
Would you mind posting the code or opening a PR to maybe add "isVirtualized"?

[alipalvane]

use https://tanstack.com/virtual/latest/docs/installation for support
this text is from nextui document:
Note: The virtualization strategy is based on the @tanstack/react-virtual package, which provides efficient rendering of large lists by only rendering items that are visible in the viewport.