Dialog memory leak (detached Dialog.Content)

[mdubourg001]

Bug report

Current Behavior

Every time a Dialog gets opened and then closed, a Detached <div> element (the Dialog.Content) gets detached but is never garbage collected, as if a reference was kept, preventing it. This represents a memory leak because opening and closing the dialog 20 times means 20 Detached Dialog.Content elements as long as their whole tree of children, which makes the memory usage grow.

Expected behavior

No reference should be held with the Dialog.Content element upon closing to allow proper garbage collection.

Reproducible example

• Go to the following CodeSandbox: https://codesandbox.io/p/sandbox/cool-meadow-h6vftg and click the "Open in a new tab" button at the top right of the Preview tab (or directly open the preview link: https://h6vftg.csb.app/)
• Open the Chrome Devtools, go to the "Memory" tab, and click the "Detached elements" checkbox
• Click the blue "Start" button at the bottom of the panel
• Notice that no element is detached yet (or at least none related to Radix's Dialog)
• Click the "Edit profile" button of the app and close the dialog 4 of 5 times in a row
• Run a new "Memory"/"Detached elements" analysis in the devtools
• Notice multiple <div> elements with the role=dialog attribute get leaked (this is actually the Dialog.Content element)

Suggested solution

Find which reference might not get removed when the dialog gets closed. I tried to search in the sources but am not able to notice anything.

Your environment

Software	Name(s)	Version
Radix Package(s)	@radix-ui/react-dialog	1.1.2
React	n/a	^18.0.0
Browser	Google Chrome	130.0.6723.92
Assistive tech
Node	n/a
npm/yarn
Operating System	Apple M1 Pro	Sonoma 14.7