React-virtualized: [Bug] List with CellMeasurer does not render correctly

[steinso]

Reproducible case: https://plnkr.co/edit/5I4FzHs8juZ4L6m5NKwV?p=preview

When rendering a List with a CellMeasurer (and deferredMeasurementCache) all rows are rendered on top of each other, only when you start to scroll the items are rendered. Also notice how it does not invalidate the dimensions of the initially rendered rows, and they all get the default height. Any rows not initially rendered are measured and rendered correctly.

My initial findings are that the Grid on List is not initialized at the point where cells are measured, therefore the invalidateCellSizeAfterRender is not called.

This was working prior to version 9.10.0.

[krsnaa]

+1. an easy workaround for the cell sizing appears to be to pass in the function form ({ measure }) => ) instead of the actual element to the CellMeasurer and call measure from inside.

[reganperkins]

+1

[smerat]

+1

[Cordazar]

@krsnaa Your idea doesn't work either in my project or in the plunkr that steinso posted.

+1 for fixing this bug.

[bvaughn]

If any of you leaving +1 comments would be interested in contributing a fix for this issue, I'd welcome the help. 😄

[OriR]

@bvaughn I'd be happy to try and fix this!
As I'm not that familiar with the code, I would appreciate it If you could point me in the right direction 😄

[bvaughn]

I'd welcome a fix, @OriR!

I don't really have anything to point you at though, other than Grid (which List uses internally) and CellMeasurer.

[OriR]

Ok then, I'll start digging around and see what I can find :)
I'll post here any updates 👍

[OriR]

@bvaughn I opened a PR fixing this issue :)

[Miindaugas]

Yes same problem Grid is not initialized correctly, waiting for fix.

Right now i use workaround.

    componentDidMount() {
       this.cache.clearAll();
       this.list.forceUpdateGrid();
    }

[bvaughn]

I plan to release an update this morning with this fix.

[ngwing]

Has this bug fixed?

[JunlinZhu-Tommy]

still suffering on this issue.