react-virtuoso: [BUG] List is not being rendered when initialTopMostItemIndex is specified

Describe the bug I think this is a bug introduce in 1a230ef78d7003c0340ac253f3232d420ca9e23a. In version 2.2.1, the list is not being rendered sometimes. Writing is hard, let’s attach some gif

Behavior in v2.2.0 (Expected behavior) apZOeyIS77

Behavior in v2.2.1 (Unexpected behavior) Kej96M7WKQ

Reproduction https://codesandbox.io/s/gallant-wescoff-n50s4?file=/src/App.js Please change the version in package.json to test the behavior.

To Reproduce Steps to reproduce the behavior: Re-run the following steps on version 2.2.1 and 2.2.0

Change react-virtuoso version to xxx
Refresh, click on Change item set
Observe the result

Expected behavior List should be rendered like how it is in v2.2.0

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 2
Comments: 21 (10 by maintainers)

Most upvoted comments

Fixed in https://github.com/petyosi/react-virtuoso/commit/16aca7514beefdc9a54e9f920337b46759acd45d.

petyosi on Oct 28, 2021

Ya, I think the bug is fixed in 2.2.6. Just tried it in sandbox for a solid 2 minutes (Windows 10, Microsoft Edge), don’t see this happening again.

I think you can reference the commit and close this issue.

Thks for your effort!

Elabar on Oct 28, 2021

@Elabar I’ve discovered something very similar (but with different steps to reproduce). It seems related to a race condition of when the browser will report the element sizes. Can you please test with 2.2.5 (recently released)?

Sadly, it does not resolve the issue. It seems to be making it worse (more frequent) Here’s the video. Side note: The content seems to be rendered for a few ms and went hidden if you watch the video slowly (6s ~ 8s)

https://user-images.githubusercontent.com/15872787/139046437-9536dcb6-cfb4-40e5-bf19-67e0668cdd05.mp4

IDK if its related because im just use it for couple of days, but sometimes the it only render List component but not itemContent, if items are enough to scroll, then items can be rendered if scroll is triggered.

I believe the issue you are facing is the same as I raised here. Check out the video in this reply, forward to very last bit of it, if I scroll, the content does render.

Elabar on Oct 27, 2021

This is certainly a fun one. I think I managed to address it in 2.2.6. Few interesting findings:

The async part in the original example from @Elabar is important. It causes a short burst of re-renders, which makes followOutput and initialTopMostItemIndex actions to interfere with each other. But not always. While the library must support such updates, I would try to avoid such setup.

Throttling the CPU in Chrome increases the chance of reproduction (I’m testing on M1 2020).

@Amethystafyy282 @Elabar please test with 2.2.6. Thanks for your help.

petyosi on Oct 28, 2021