Two <WindowScroller>s on a page causes the second one to not render properly
See original GitHub issueWhen 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 the width
of your <List>
component to a static value.
See codesandbox example.
Issue Analytics
- State:
- Created 5 years ago
- Reactions:13
- Comments:9
Top Results From Across the Web
ALL browsers fail to render [some] pages correctly: tried
ALL browsers fail to render [some] pages correctly: tried all Windows browsers. There is something odd with my new laptop with NVIDIA ...
Read more >Width of the Table in AutoSizer and Window Scroller is not ...
I am using React-Virtualized to display a table with a long list of values. So it's a combination of WindowScroller, AutoSizer and Table....
Read more >Rendering large lists with React Virtualized - LogRocket Blog
So many elements in the DOM can cause two problems: Slow initial rendering; Laggy scrolling. However, if you scroll through the list, you...
Read more >List Virtualization - Patterns.dev
If you use React and need to display large lists of data efficiently, ... at once (which can cause slower initial rendering or...
Read more >bvaughn/react-virtualized - Gitter
Hi @bvaughn , on the demo page for ArrowKeyStepper ( this one ) using the arrow ... was not created inside a component's...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
I’ve done some more digging. I’m not familiar at all with the codebase, but maybe my findings still help:
WindowScroller
has anupdatePosition()
method which measures the dom element’s offset and stores it in_positionFromTop
and_positionFromLeft
.updatePosition()
is called incomponentDidMount()
, but at the time the offsets are stored, the lists themselves haven’t been painted yet. For the first one, that isn’t a problem because_positionFromTop
is correct no matter its height. But the second list does depend on what has been rendered above. So what seems to be happening is that an incorrect_positionFromTop
is stored during the initial render, breaking virtualization in the second list. Resizing the window triggersupdatePosition()
to be called again from_onResize()
, which fixes the incorrect offsets - hence the behavior demonstrated in my comment above.Another place where
updatePosition()
is called is inregisterChild
. A (rather unsatisfying) quick fix for the problem seems to be doing something like this:Note that it only works when recreating the function passed to
ref
on every render, i.e.ref={el => registerChild(el)}
instead ofref={registerChild}
. I’ve tweaked @apelsinet’s example accordingly: https://codesandbox.io/s/jjnr1v3r3w?fontsize=14It’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. 😃
@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. 🤔