CellMeasurer has wrong measurements for FIRST batch only

I’m using the CellMeasurer in order to calculate a VirtualScroll’ row’s height, and it’s using a completely wrong measurement for the initial batch of visible rows.

This ends up something like the following (the top 4 rows were a part of the initial batch, and have a very tall height):

The virtualized components that I’m using are as follows:

<WindowScroller>
    { ({ height, scrollTop }) =>

        <AutoSizer disableHeight>
            { ({ width }) =>

                <CellMeasurer
                    cellRenderer={ cell => this.renderVirtualRow(cell.rowIndex) }
                    columnCount={ 1 }
                    rowCount={ items.length }
                    width={ width } >
                    { ({ getRowHeight }) =>

                        <VirtualScroll
                            autoHeight
                            style={ { background: '#EEE' } }
                            width={ width }
                            height={ height }
                            scrollTop={ scrollTop }
                            rowCount={ items.length }
                            rowHeight={ getRowHeight }
                            rowRenderer={ row => this.renderVirtualRow(row.index) } />

                    }
                </CellMeasurer>

            }
        </AutoSizer>

    }
</WindowScroller>

If I scroll, the rows that get rendered all have the correct heights, but the initial batched rows are still all wrong.

It’s happening on both Chrome and FireFox.

[damusnet]

Hi @bvaughn

FWIW I encountered the same issue, in a Next.js SSR app. I think your diagnostic is correct, but I couldn’t figure out how to improve the measurement as everything in my design is fluid, and inside a swipe-view to make it even more complicated.

My solution was as follows:

  componentDidMount() {
    if (this.list) {
      setTimeout(() => {
        cache.clearAll();
        this.list.recomputeRowHeights();
      }, 0);
    }
  }

[bvaughn]

Closing for now. Don’t have enough info to help diagnose this further.

Comments will still notify me via email- so if you get a chance to provide a Plunker or some way to reproduce, let me know and I’ll be happy to take another look. 😃