[Bug]: Closed modal is retained as a detached element

[AndrewBarzu]

Library

React / v8 (@fluentui/react)

System Info

System:
    OS: macOS 12.6
    CPU: (10) arm64 Apple M1 Max
    Memory: 25.08 GB / 64.00 GB
    Shell: 5.8.1 - /bin/zsh
  Browsers:
    Chrome: 105.0.5195.125
    Safari: 16.0

Are you reporting Accessibility issue?

No response

Reproduction

https://codesandbox.io/s/z388du?file=/src/index.tsx

Bug Description

Actual Behavior

In edge:

1. Open Modal
2. Close Modal
3. Look into detached elements
4. Press "Get Detached Elements"
5. Press "Analyze"
6. Press again "Get Detached Elements"
7. The modal is left in detached elements

Expected Behavior

The modal should not be retained as a detached element. Even though this does not cause a bad memory leak (memory does not continue bloating) it's still bad because sensitive information can still be leaked from the modal.

Logs

No response

Requested priority

Normal

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

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.

[miroslavstastny]

This is actually React working as intended and there's nothing we can actually do about it.
Also this is not what we've considered a real leak since the detached HTML element count does not actually increase. React will keep two separate trees in memory for optimization purposes and there is an open issue on their end stating that detached elements in alternate trees won't be fixed any time soon facebook/react#16087.

fyi @ling1726