WindowScroller height undefined
See original GitHub issueI’m using the following code sampled from: https://github.com/bvaughn/react-virtualized/blob/master/source/WindowScroller/WindowScroller.example.js.
When loading the page, I am seeing the this prop type warning:
Warning: Failed prop type: The prop `height` is marked as required in `List`, but its value is `undefined`.
However, when I inspect the List
element using the React dev tools, the height
prop is set appropriately.
I followed the example as closely as possible, and I do not see any differences in the code. Could this be a bug with WindowScroller
, or is it more likely an implementation issue?
<WindowScroller scrollElement={this.mainContent}>
{({ height, isScrolling, onChildScroll, registerChild, scrollTop }) => (
<AutoSizer disableHeight={true}>
{({ width }) => (
<div ref={registerChild}>
<List
autoHeight={true}
height={height}
isScrolling={isScrolling}
onScroll={onChildScroll}
ref={this.virtualListRef}
rowCount={this.state.list.length}
rowHeight={50}
rowRenderer={this.rowRenderer}
scrollTop={scrollTop}
width={width} />
</div>
)}
</AutoSizer>
)}
</WindowScroller>
Issue Analytics
- State:
- Created 5 years ago
- Reactions:2
- Comments:5
Top Results From Across the Web
WindowScroller + AutoSizer + List not working as expected
I was trying to use the combination of the WindowScroller + AutoSizer + List on my web application. The virtualization works well when...
Read more >RB DND + Window Scroller - React Virtuoso
RB DND + Window Scroller ... the height is necessary to prevent the item container from collapsing, which confuses Virtuoso measurements.
Read more >types/react-virtualized - UNPKG
@types/react-virtualized/dist/es/WindowScroller.d.ts ; 40, /** Height used for server-side rendering */ ; 41, serverHeight?: number | undefined; ; 42 ; 43, /** ...
Read more >Window.scroll() - Web APIs - MDN Web Docs
The Window.scroll() method scrolls the window to a particular place in the document.
Read more >types/react-virtualized@9.21.21 - jsDocs.io
Decorator component that automatically adjusts the width and height of a single child. Child component should not be declared as a child but ......
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 am also experiencing this and I believe it is an actual bug. When I provide a scrollElement to WindowScroller, height is undefined for the very first render. I believe the problem is in WindowScroller.js on line 93. This line is trying to set state using the spread operator with getDimensions. But getDimensions is returning a DOMRect, which cannot be used with the spread operator. According to MDN:
(https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect)
I’ve hit the issue with scrollElement too (height being undefined for the very first render because
this.state = { ...getDimensions(scrollElement) }
doesn’t fill any property). In my case the List then effectively renders all rows resulting in out of memory error. ScrollElement was DOM node, not window.Edit: this is actually same as #1158 which is Open.