[Bug]: Grouped DetailList Virtualization Issues

[brlowen]

Package

react

Package version

8.37.0

React version

16.8.0

Environment

System:
    OS: Windows 11 10.0.26100
    CPU: (16) x64 Intel(R) Xeon(R) Platinum 8370C CPU @ 2.80GHz
    Memory: 28.10 GB / 63.95 GB
  Browsers:
    Edge: Chromium (139.0.3405.86)

Current Behavior

When scrolling quickly through a large detaillist with grouping there are virtualization issues where the scroll location will jump around on the screen and sometimes no data is shown (just a blank white component). See repro in this code pen: https://codepen.io/brlowen/pen/ogjPyrK?editors=1010

Expected Behavior

Scrolling quickly should work properly.

Reproduction

https://codepen.io/brlowen/pen/ogjPyrK?editors=1010

Steps to reproduce

1. Load this code pen https://codepen.io/brlowen/pen/ogjPyrK?editors=1010
2. Make sure you have a lot of data in a detail list with grouping enabled (custom rendered rows appears to make this worse)
3. Scroll quickly with scroll wheel or by dragging the scroll bar location

Are you reporting an Accessibility issue?

None

Suggested severity

High - No workaround

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

• [x] Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• [x] The provided reproduction is a minimal reproducible example of the bug.

[dmytrokirpa]

Hello @brlowen, thanks for the issue report. The core team doesn't have the capacity to work on this at the moment, but if you are willing to contribute, we are happy to assist!

[NewFuture]

👀