React-window: [DynamicSizeList] Wrong positions after adding/removing items from the list

[brunolemos]

I’m experimenting with the branch #102.

Almost everything works well.

I’m facing a problem when the list items change:

1. Render list with initial items (ok)
2. Remove the second item
3. See some items get positioned wrong

See the blank space between items after filtering out the item that contains the word “progress”:

After I scroll past this blank space and go back, it get’s fixed.

I also noticed the items get wrong positions if new items are added to the list.

See wrong spacing after first item and cut off bottom buttons of the second item:

_I don’t have a small reproducible demo, but the gif above is from this branch_

I check and confirmed the props being passed to DynamicSizeList are being updated correctly (itemCount changes and this.getItemKey(2) get the the new id), so I believe it’s some react-window internal, probably related to the cache.

[nihgwu]

did you call resetAfterIndex after removed item?

[graphee-gabriel]

@nihgwu resetAfterIndex does not exist for DynamicSizeList
https://react-window-next.now.sh/#/api/DynamicSizeList

[tootiny]

@brunolemos by any chance are your list items class components that override shouldComponentUpdate?

[brunolemos]

are your list items class components that override shouldComponentUpdate?

nope

[ealexseen]

@brunolemos
I think need install polyfill ResizeObserver
For information https://react-window-next.now.sh/#/examples/list/dynamic-size
https://caniuse.com/#search=ResizeObserver

[brunolemos]

I use the polyfill already

[bustEXZ]

Hi there. Same problem, can i drop cache of items? Maybe add resetAfterIndex to DynamicSizeList?
Thanks
ps. i'm using ResizeObserver polyfill too

[ttamminen]

Just wanted to inform that I have the same issue.

In my case, the dimensions of a list item change due to the filtering. I think the itemSize calculation should re-triggered somehow.

[hidai]

How about adding key={Math.random()} to your DynamicSizeList? It forces to initialize the component at every rendering.

[Alino]

How about adding key={Math.random()} to your DynamicSizeList? It forces to initialize the component at every rendering.

This actually works but with one flaw. If you are adding items to the list and you are scrolled down (not on top of the list) then each addition/change to the list will rerender the List and reset the position to top. So unusable for my use case where I am sequentially fetching data from an API while the user should be able to scroll in the list and use filters for the list.