[Bug]: Re-mounting breaks List Virtualization

[mijpeterson]

Library

React / v8 (@fluentui/react)

System Info

System:
    OS: Windows 10 10.0.22621
    CPU: (20) x64 Intel(R) Core(TM) i9-10900K CPU @ 3.70GHz
    Memory: 107.12 GB / 127.71 GB
  Browsers:
    Edge: Spartan (44.22621.1413.0), Chromium (110.0.1587.56)
    Internet Explorer: 11.0.22621.1

Are you reporting Accessibility issue?

None

Reproduction

https://codesandbox.io/s/red-lake-c7b419?file=/src/App.tsx

Bug Description

Actual Behavior

When scrolling through the DetailsList in the provided sample, you'll notice that the list fails to load in subsequent pages of results, even with the scrollable container being defined.

After some investigation, I've found that the issue happens when the component re-mounts (a result of React.StrictMode).

The bug is a result of how the event group is being disposed on unmount, but not being re-initialized on remount (it is only initialized in the constructor). When the component re-mounts, the component tries to register the events again, but because the event group had been disposed, none of them get processed (including the necessary "scroll" events).

The fix is likely to move initialization of the event group from the constructor into componentDidMount, with the other event registration methods.

Expected Behavior

The DetailsList is able to virtualize properly on scroll after a re-mount.

Logs

No response

Requested priority

High

Products/sites affected

No response

Are you willing to submit a PR to fix?

yes

Validations

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

[ling1726]

Closing as duplicate of #27533