[Bug]: DialogSurface Detached DOM leak

[dansjo99]

Component

Dialog

Package version

9.69.0

React version

18

Environment

All browsers (Chrome, Edge) and also Native Chromium based app (Teams Desktop)

Current Behavior

#35233 Reopening previously closed issue.As shown by contributors response, JS Heap increased each time dialog was opened and closed. This in itself is a clear memory leak. Something is holding a reference to the dialog even after it is closed.

Repros on FluentUI demo site as wellhttps://storybooks.fluentui.dev/react/?path=/docs/components-dialog--docs.

Image

After dialog is closed, a reference stil remains as a detached dom node. Which takes up memory. The impact of this depends on the size of the dialog. For example in the Copilot app, we have a dialog that holds a reference to 1000+ strings, causing a leak of over 50 MB each time this dialog is opened and closed. JS heap will increase as well as Native memory (dom node leaks majorly impact native memory).

Expected Behavior

Memory should be released when Dialog is closed. It should not remain as a detached node, otherwise the memory usage of the application will continue to increase each time dialog is opened/closed.

Reproduction

https://stackblitz.com/run?file=src%2Fexample.tsx

Steps to reproduce

1.Click on dialog
2.Close dialog
3.open dialog again
4.close dialog
5.Take heap screenshot of detached dom nodes

Are you reporting an Accessibility issue?

no

Suggested severity

Urgent - No workaround and Products/sites are affected

Products/sites affected

Copilot app on all platforms

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.

[dmytrokirpa]

Investigation summary

• The leak originates in the motion layer, not DialogSurface. Dialog uses presence animations via DialogSurfaceMotion.
• In createPresenceComponent, the exit animation handle is never cleared/cancelled when exit finishes. Animation objects keep strong references to their target elements, so after close (with unmountOnClose) the DOM node is removed but the animation handle still holds it, showing up as a detached node in heap snapshots.
• Cleanup only runs when the presence effect re-runs (e.g., visible flips again) or on component unmount. While the dialog stays closed, the effect doesn’t re-run, so the handle persists and keeps the detached surface alive. Reopening later clears the previous handle, matching the repro (one detached node per close while closed).

Proposed fix

• In createPresenceComponent, when exit completes (and on cancel), clear handleRef.current and cancel/dispose the animation handle so the WAAPI Animation releases the element immediately. Add a test to assert no animations remain after closing with unmountOnClose=true.

Assigning this to @microsoft/teams-prg as the @fluentui/react-motion owning team.