search

petyosi / react-virtuoso

The most powerful virtual list component for React
https://virtuoso.dev
MIT License
5.25k stars 301 forks source link

[BUG] Visual problem while using Virtuoso with OverlayScrollbars, introduced in 2.3.2 #662

Closed Ethorsen closed 2 years ago

Ethorsen commented 2 years ago

Hi @petyosi

Describe the bug In 2.3.2, when using with OverlayScrollbars as custom scrollbar. Items not initially in the viewport wont render/show.

Reproduction https://codesandbox.io/s/react-virtuoso-custom-scrollbar-forked-jfdu5y?file=/src/CustomScrollbar.js

To Reproduce Simply scroll down, items passed initial viewport are showing blank.

image

Switching to 2.3.1, items are loading fine

Expected behavior Items loading properly

Screenshots image

Desktop (please complete the following information): N/A

Additional context N/A

Thx

petyosi commented 2 years ago

This (and the other issue you have reported) is due to this additional size change detection introduced in 2.3.2. It boils down to the component searching for an element with data-virtuoso-scroller attribute.

I have no knowledge of the third-party library you refer to, so I can't assist with the exact solution to this problem. However, the custom scroll component receives the data attribute through its props - you should be able to adjust it.

Ethorsen commented 2 years ago

Thx @petyosi

Made this sandbox fixing the crash. But i'm left with the problem mentioned here (additional data is never loaded).

https://codesandbox.io/s/react-virtuoso-custom-scrollbar-forked-6wynfm?file=/src/CustomScrollbar.js

I'll schedule a different task for us to upgrade and investigate/fix this issue.

If you ever have a few minutes to check it out that would be appreciated. Maybe the solution will be obvious to you. (the data-virtuoso-scroller attribute might not be applied to the right element)

Take care