-
-
Notifications
You must be signed in to change notification settings - Fork 3.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Two <WindowScroller>s on a page causes the second one to not render properly #1324
Comments
@apelsinet, did you make any progress on this? I'm dealing with the same problem right now. I've noticed though that it does seem to work after once resizing the window. 🤔 |
I was having this issue on a project, and I ended up putting everything inside a single and created a function to handle the height of everything, instead of having to use multiple autosizers and lists |
Nope, I ended up not using virtualised lists on pages with multiple lists unfortunately. |
I've done some more digging. I'm not familiar at all with the codebase, but maybe my findings still help:
Another place where <WindowScroller>
{({ height, registerChild, scrollTop }) => (
<div>
<AutoSizer disableHeight>
{({ width }) => (
<div ref={el => registerChild(el)}> // <-- relevant line
<List
autoHeight
height={height}
rowCount={list1.length}
rowHeight={32}
rowRenderer={rowRenderer1}
scrollTop={scrollTop}
width={width}
/>
</div>
)}
</AutoSizer>
</div>
)}
</WindowScroller> Note that it only works when recreating the function passed to It's obviously a hack and probably not the right long-term solution. I'm not sure at all about possible negative implications. But at least it seems like RV isn't very far from supporting this use case. :) |
@nicolasschabram thank you so much for doing the research and supplying this solution! It's definitely better than not using RV at all 😄 |
One more workaround that seems to work: wrapping the |
@nicolasschabram Thank you so much for this. Hack or not, it works for my use case without any apparent implications. |
@nicolasschabram your hack works like a charm for a default window scroller. However, once you set a scrollElement (and you need to do so if you have some nested components) it stops working. Does anyone have a solution with 2 lists on top, a window scroller, and custom scroll element? |
OK, I figured out what the problem was with 2 WindowScrollers and the same scrollElement provided to each one, the When I commented the if statement it works perfectly. I am not really sure what this check is for, probably something to prevent too many event listeners to the same component. export function registerScrollListener(
component: WindowScroller,
element: Element,
) {
// if (
// !mountedInstances.some(instance => instance.props.scrollElement === element)
// ) {
element.addEventListener('scroll', onScrollWindow);
// }
mountedInstances.push(component);
} This only works thanks to @nicolasschabram relevant line ;) <div ref={el => registerChild(el)}> // <-- relevant line @bvaughn First of all. Big thanks to you for your incredible work! I know in your mind we are using the lib in the wrong way but for my case (React Beautiful DND) I really need multiple lists on top of each other and can't really combine it into one. I am sure many more have this same issue so maybe someone can help with this use case. WindowScroller is used by many in conjunction with react-window as well. |
When I'm trying to render multiple lists (2 in my case) after each other, both using
<AutoSizer>
and<WindowScroller>
, the second one does not render properly. It takes up the correct amount of space on the page, but the rows are gone except for a few at the bottom of the page. If you scroll up, a few more of them appears. This issue does not happen after resizing your window, or if you set thewidth
of your<List>
component to a static value.See codesandbox example.
The text was updated successfully, but these errors were encountered: