Bug.
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.
The height of each item should be updated according to the content of the underlying list even if that list changes.
| | |
|-------------------|----------|
| 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.
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.
Most helpful comment
Yeah, using
CellMeasurerCache#clearAll&List#recomputeRowHeightsseemed 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.