[BUG] Custom Scroller no longer works after upgrading to v2.3.2, main demo site example also appears broken

Describe the bug List renders first page of items but fails to load more. See the example on virtuoso.dev site, here

Desktop (please complete the following information): MacBook Pro (13-inch, M1, 2020) MacOS Monterey 12.0.1 Chrome v97

Had to roll back my version to 2.3.1 to get it working again. Any idea what’s going on? Below is my implementation of custom scrollbars that work < v2.3.1.

import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';

const CustomScrollbars = React.forwardRef(({ children, style, ...props }, ref) => {

  const refSetter = useCallback((scrollbarsRef) => {
    if (scrollbarsRef) {
      ref.current = scrollbarsRef.osInstance().getElements().viewport;
    }
  }, [ref]);
  
  return (
    <OverlayScrollbarsComponent
      ref={refSetter}
      options={{ overflowBehavior: { x: 'hidden' } }}
      style={style}
      {...props}
    >
      {children}
    </OverlayScrollbarsComponent>
  );
});

[maxhelsel]

Yes, that’s it. For anyone who stumbles upon this in the future, here’s what I did to fix the OverlayScrollbars component to get it working > v2.3.2 again.

Here’s the props that need to be injected post v2.3.2:

data-test-id="virtuoso-scroller"
data-virtuoso-scroller="true"
tabindex="0"

However, simply passing {…props} into the OverlayScrollbarsComponent does not work, as they end up injecting into the wrapper - not the internal scroll container itself. To fix, I looped the props passed from Virtuoso and injected them into the scroll element.

const CustomScrollbars = React.forwardRef(({ style, children, ...props }, ref) => {

  const refSetter = useCallback((scrollbarsRef) => {
    if (scrollbarsRef) {
      let customViewport = scrollbarsRef.osInstance().getElements().viewport;
      for (const key in props) {
        if (!props.hasOwnProperty(key)) {
          continue;
        }
        customViewport.setAttribute(key, props[key])
      }
      ref.current = customViewport;
    }
  }, [ref]);

  return (
    <OverlayScrollbarsComponent
      ref={refSetter}
      style={{ ...style }}
    >
      {children}
    </OverlayScrollbarsComponent>
  );
});

The above props get passed as attributes into the scroll container using the described method.

[paulm17]

@maxhelsel Thanks so much for following up. Appreciate it. I too am running nextjs and my code is similar to yours (exactly as the sandbox).

Edit: Switched to using your code as GroupedVirtuoso wouldn’t take the scroller component. I’m using VirtuosoGrid, Virtuoso and GroupedVirtuoso in this app. 😄

I have noticed that if I update either dependencies

overlayscrollbars-react to 0.4.0 - it breaks overlayscrollbars to 2.0.0-beta.0 - it breaks

For now I’m content with running an older version. Once I finish the project I’m working on, then I’ll circle back and try to work out why later versions break.