Use TanStack Infinite Queries with Virtualized ComboBox - Is it possible with HeadlessUI 2.1

[ynnelson]

I have been scratching my brain to try and figure out if I can used the virtualized combobox while using TanStack infinite queries but so far I have not been able to figure it out. I doesn't seem like I can assign a ref to ComboboxOptions to do something like in this example https://tanstack.com/table/v8/docs/framework/react/examples/virtualized-infinite-scrolling.

Any thoughts on how to make that happen with the current API? that would be very helpful when trying to feed 10k or more options in the Combobox.

[ynnelson]

I ended up using the following:

const handleScroll = (e) => {
    const { scrollTop, scrollHeight, clientHeight } = e.target;
    if (scrollHeight - scrollTop <= clientHeight * 1.75) {
      if (hasNextPage && !isFetchingNextPage) {
        fetchNextPage();
      }
    }
  };

....

 <ComboboxOptions
            ...
            onScroll={handleScroll}
            ... >
...
</ComboboxOptions>

That worked well but I get this warning in the browser:

Any easy way to make this a passive event as opposed to a blocking one?

[roomman]

I've also been struggling with the fact you can't render anything other than the option into ComboboxOptions when in virtual mode. Like you, I am using Tanstack Infinite Queries. I am also working with potentially large lists and need to paginate as well as virtualise. I am using react-intersection-observer and a useEffect to fire fetchNextPage. I am having to compute the unique key of the last item I've loaded and use that to conditionally add a ref to the last option. Here's an outline of my approach:

...
// grab the ref from `react-intersection-observer` - inView is true when ref is in view
const { ref, inView } = useInView();

...
// grab the key of the last option 
const lastOptionUniqueKey = allOptions[allOptions.length - 1][uniqueKey];

...
// fire fetchNextPage when the last option is inView
useEffect(() => {
  if (inView && hasNextPage && !isFetchingNextPage) {
    fetchNextPage();
  }
}, [inView, hasNextPage, isFetchingNextPage, fetchNextPage]);

...
// conditionally add the ref to 
<ComboboxOptions>
{({ option }) => (
  <ComboboxOption value={option}>
    <span
      ref={option[uniqueKey] === lastOptionUniqueKey ? ref : null}
    >
      {displayValue(option)}
    </span>
  </ComboboxOption>
)}
</ComboboxOptions>

This gets me where I need to be but adds unwanted overhead, and still leaves me unable to render any feedback for my users when the next page is being fetched, or there is no more data to fetch.