Virtual List Scroll Jumps

[matthiasp42]

I'm using a List where each list item is wrapped by a cell measurer.
When I click on a cell, I change the height of that cell.

This mostly works well, but if you expand a few cells, scroll further (until they're out of sight), then expand another one, there's a glitch.
The list kind of jumps around. But if you scroll a tiny bit, the lists position is right where it should have been.

Here is my GitHub repo (just run 'npm start'):
https://github.com/matthiasp42/react-virtualized-scrolling-bug

I spend some time looking into it, but I'm not getting any wiser.
I realize that this might be quite a complicated bug and doesn't have high priority...

Does anybody have a suggestion how I can use RV differently to get my desired effect?

[bvaughn]

Inside of switchClickTo change:

this.cache.clearAll();

to:

this.cache.clear(index);

The only row that's changed size is the one at index so you don't need to clear the whole cache.

To be honest, it should probably still not demonstrate the behavior your repo shows. But this ^ is the right way to do it and it works.

[matthiasp42]

Can confirm.
This makes my day, thank you for everything. :)

[bvaughn]

You're welcome :)

[bananatranada]

@bvaughn I'm facing a similar issue, but I'm replacing multiple rows.

I'm currently getting the length of the cache via _rowHeightCache and clearing from index+1 to the last. Is there a better way? Accessing an underscore property doesn't feel right. I was wondering maybe a public method similar to recomputeRowHeights is in the works. Or if you're considering. If so I could try to create a PR.

To give some context, I'm building an accordion-like component but each accordion can contain multiple rows and variable heights.

[warmbowski]

@bananatranada Just came upon this issue. We are building a similar accordion-like set of rows. So if you click expand on a particular type of row in the list, a set of rows pertinent to it are inserted (which can differ in height). What we do to combat any ui jumps in the list is to invalidate the cached row sizes for the all rows at the index of insertion to the end of the list.

[johnnyLai-coding-demo]

just experience the same issue...

[johnnyLai-coding-demo]

just experience the same issue...

just found that it was caused by my useEffect code, triggered the cache.clearAll(); twice,,, it is fine now