Dropdown Item Event Listeners not removed when component unmounts

[pllcoster]

Check existing issues

• I have checked for existing issues to avoid duplicates

Actual Behavior

While investigating a possible memory leak in our App, I noticed that among the retained items causing memory use to increase, I was finding detached calcite-dropdown-items inside dropdowns/list items and lists that were retaining objects associated with their event handlers:

Expected Behavior

I expect event listeners to be cleaned up when the component unmounts, to prevent possible memory leaks.

Reproduction Sample

https://codesandbox.io/p/devbox/calcite-dropdown-event-listener-memory-leak-hvqggj

Reproduction Steps

From the sandbox, open the demo in a new tab or follow this link: https://hvqggj-5173.csb.app/

Open chrome dev tools and go to the memory tab then repeat the following operations:

1. Click the large blue button that triggers the calcite dropdown to open
2. Click the 'unmount button' button, that unmounts the calcite button and dropdown
3. Click the 'mount button' button to remount the calcite button and its dropdown
4. Take a memory snapshot in the browser dev tools

On each iteration the memory usage will increase by about 100MB, in the retained objects the number of BigObjects will increase, and the leaked objects will be retained by detached calcite-dropdown-item event handlers:

Reproduction Version

2.13.2

Relevant Info

Tested on Chrome Using React Calcite Components.

Regression?

No response

Priority impact

impact - p2 - want for an upcoming milestone

Impact

Event handlers not being cleaned up will result in memory leaks, which can cause problems if the event handlers have closure over large objects.

Calcite package

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

Esri team

ArcGIS Knowledge

[pllcoster]

Just an update that this memory leak still appears to be present as of calcite-components-react 3.0.0-next.132

See updated test app for v3 here: https://stackblitz.com/edit/github-s5yagwdp-c9p4fxqv?file=src%2FApp.tsx

If the dropdown group is commented out in the 'MockDropdown' component, the big object will be garbage collected as expected on mount / unmount and memory usage doesn't climb, however with the dropdown group and dropdown item with event handler present, the big object is no longer garbage collected on mount / unmount cycles and memory usage grows.

Thanks!