[Bug]: Memory Leak in Menu

[joekukish]

Code of conduct

• I agree to follow this project's code of conduct.

Impacted component(s)

Menu

Expected behavior

No response

Actual behavior

MenuItemRemovedEvent keeps an instance to an object, which is never cleared. This introduces a leak since the object cannot be garbage collected.

https://studio.webcomponents.dev/edit/C5gyfKCjjMMv14UmjQzr/src/index.ts?p=stories

Screenshots

No response

What browsers are you seeing the problem in?

No response

How can we reproduce this issue?

1. Go to https://studio.webcomponents.dev/edit/C5gyfKCjjMMv14UmjQzr/src/index.ts?p=stories
2. Open Chrome DevTools and go to the Memory tab.
3. Click on Profiles > Head snapshot > Take snapshot
4. Click the Show / Hide button (10-20 times)
5. Go to Performance Tab in DevTools, and click on the Trash Icon (garbage collection).
6. Go to Memory Tab, and take another snapshot
7. Next to the search field, "All Objects", select Objects allocated between Snapshot 1 and Snapshot 2.

8. Search for Detached

_item is the MenuItem held inside the event

Sample code that illustrates the problem

No response

Logs taken while reproducing problem

No response

[Westbrook]

Would be great to have a slice for slice test scenario for this to compare fixed against. You wouldn't happen to have set something like that up in order to track this down?

[joekukish]

@Westbrook I've added a playground where it can be reproduced and steps of how to find the leak.

[nawazmobusss]

Hi @Westbrook , Can I kindly ask for an update on this ticket? One of our components is using Menu and we see memory leaks leading to memory crashes in mobile app & safari browser. It would be highly appreciated if this could be addressed soon as we are looking for a public release in 2 weeks.

[najikahalsema]

@nawazmobusss We will have this ready to go for you in a release this week.