React-virtualized: List + CellMeasurer + varying list items -> heights don't update correctly

Created on 28 Aug 2018  路  2Comments  路  Source: bvaughn/react-virtualized

Do you want to request a feature or report a bug?

Bug.

What is the current behavior?

When using List along with CellMeasurerCache (because the heights of elements aren't predefined) it keeps the heights of the previous elements even if the underlying list changes.

Given this codesandbox you'll see that after a few searches (try something like height 1, height 5 and then clear) you'll notice the heights don't change.
Only after scrolling all the heights update.
If I force to never keep a style cache (by declaring an arrow function for rowHeight like so rowHeight={(...args) => this.cache.rowHeight(...args)}) everything works as expected.
This of course has to work with keyMapper since the list changes, the row index is no longer valid when identifying the row.

I think this might be related to this issue but it was closed a long time ago so I'm not sure.

What is the expected behavior?

The height of each item should be updated according to the content of the underlying list even if that list changes.

Which versions of React and react-virtualized, and which browser / OS are affected by this issue? Did this work in previous versions of react-virtualized?

| | |
|-------------------|----------|
| Browser | Chrome |
| OS | OSX |
| React | 16.1.0 |
| React DOM | 16.1.0 |
| react-virtualized | 9.18.5-latest |

It's probably not browser/os related.

Most helpful comment

Yeah, using CellMeasurerCache#clearAll & List#recomputeRowHeights seemed to do the trick.

Not super clear from the docs that you'd need at least clear the problematic cell heights and then let the list know to recompute them.

Anyway, since this no longer an issue for me I'll close it.

All 2 comments

I've been digging through some issues to handle my use case which has this problem - have yet to try but this seems like a relevant SO question with an example: https://stackoverflow.com/questions/43837279/dynamic-row-heights-with-react-virtualized-and-new-cellmeasurer.

tl;dr is you have to explicitly update the cache and call recompute yourself :/

Yeah, using CellMeasurerCache#clearAll & List#recomputeRowHeights seemed to do the trick.

Not super clear from the docs that you'd need at least clear the problematic cell heights and then let the list know to recompute them.

Anyway, since this no longer an issue for me I'll close it.

Was this page helpful?
0 / 5 - 0 ratings