Memory leak detaching modal dialog

[nwhittaker]

Check existing issues

• I have checked for existing issues to avoid duplicates

Actual Behavior

A <calcite-dialog> element with modal enabled remains in memory after detaching it from the DOM.

Expected Behavior

Modal dialogs are garbage collected after detaching from the DOM.

Reproduction Sample

https://codepen.io/nwhittaker-esri/pen/jEOBjmX

Reproduction Steps

Assuming Chrome 133.

1. Visit the sample and open devtools.
2. Click the Toggle dialog switch twice.
3. Navigate to the Memory tab in devtools.
4. Under Select JavaScript VM instance, select "cdpn.io: jEOBjmX".
5. Take a heap snapshot and search for "dialog" and see an entry for "Detached <calcite-dialog>".
6. Optionally set dialog.modal = false before creating/destroying the dialog. Dumping the heap again should show no <calcite-dialog> element is retained.

Reproduction Version

3.0.3

Relevant Info

Possibly similar to #11668.

Regression?

No response

Priority impact

impact - p2 - want for an upcoming milestone

Impact

This issue impacts a complex component that is likely to be attached/detached frequently. The component is slated for the spring release.

Calcite package

• @esri/calcite-components
• @esri/calcite-components-react
• @esri/calcite-design-tokens
• @esri/calcite-ui-icons
• @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Field Apps