I am using "react-virtualized": "9.22.5", and I am trying to render a list.
When I pass
<List
height={myList.length * 30}
rowHeight={30}
rowCount={myList.length}
width={240}
style={{maxHeight: 657}}
rowRenderer={({ index, key, style }) => {...}
/>
I get only the first 21 items, even if myList is longer. This means that I do not get scrollbar, and that the rest of the items are not visible. If I use instead rowCount={myList.length + 1}, it magically counts the rows correctly and I get my scrollbar. Alternatively, setting height={myList.length*30 - 0.001} will also work.
console.log(myList.length) shows the correct length.
What is going on?
Turns out, that List doesn't know what its maxHeight is - it "thinks" that it is displayed at full height. And since height is just as big as rowCount requires, no scrollbar is displayed. To display scollbar, height must be less than rowCount*rowHeight, regardless of other styles.
My solution was to write List without the maxHeight, but otherwise I would have used the -0.001 hack.