onLoadMore prop for react-aria-components ListBox

[Talor-A]

Provide a general summary of the feature here

it appears that useListBox and react-spectrum/ListBox both support an onLoadMore prop, but react-aria-components/ListBox doesn't expose one. it would be great to have this feature.

🤔 Expected Behavior?

    <ListBox
      items={list.items}
      isLoading={list.isLoading}
      onLoadMore={list.loadMore}
    >
      {(item) => <Item key={item.name}>{item.name}</Item>}
    </ListBox>

😯 Current Behavior

no onLoadMore prop exists

💁 Possible Solution

No response

🔦 Context

trying to replace our reliance on downshift with just one library with react-aria. if there's a workaround I can use by creating a custom <ListBox/> component using useListBox and ListBoxContext, that would work here too.

💻 Examples

No response

🧢 Your Company/Team

replit.com

🕷 Tracking Issue

No response

[reidbarber]

This is something we definitely want to support at some point soon. We will also want consider eventually supporting virtualization which is related, but that could be added added later (and would be non-breaking). We might also consider adding an onScroll event, which would work for this.

[Talor-A]

nice, thanks! do you know if there's any way to work around the issue in the meantime?

[reidbarber]

I think you can probably pass in a ref, then inside a useEffect, add a scroll event listener to the element directly via the ref. You would want to keep track of the max e.target.scrollTop value reached, then load more data every time max % threshold === 0, where threshold is how many px you want to scroll before loading more data.

[Talor-A]

I think you can probably pass in a ref, then inside a useEffect, add a scroll event listener to the element directly via the ref. You would want to keep track of the max e.target.scrollTop value reached, then load more data every time max % threshold === 0, where threshold is how many px you want to scroll before loading more data.

makes sense, I'll give it a shot – thanks for your help!

[Talor-A]

here's my completed workaround. seems to work great, thanks @reidbarber !

function ListBoxInner<T extends object>(
  { dataCy, onLoadMore, ...props }: ListBoxProps<T>,
  ref: React.Ref<HTMLDivElement>,
) {
  const scrollRef = React.useRef<HTMLDivElement>(null);

  useIsomorphicLayoutEffect(() => {
    const el = scrollRef.current;
    if (!el) {
      return;
    }

    const onScroll = () => {
      if (
        el.scrollTop + el.clientHeight >=
        el.scrollHeight - LOAD_MORE_THRESHOLD
      ) {
        onLoadMoreRef?.();
      }
    };

    el.addEventListener('scroll', onScroll);

    return () => el.removeEventListener('scroll', onScroll);
  }, [onLoadMore]);

  return (
    <AriaListBox<T>
      css={style.listbox}
      data-cy={dataCy}
      {...props}
      ref={mergeRefs(ref, scrollRef)}
    />
  );
}

export const ListBox = React.forwardRef(ListBoxInner);

[reidbarber]

onScroll is being added in #5534, so that may help people in the meantime.