igniteui-angular Memory Leak in igx-grid (please test with all controls)

Memory Leak in igx-grid (please test with all controls)

Open m4yorga opened this issue 2 years ago • 1 comments

Description

I think there is a core element in Ignite, maybe the igxOverlayService, causing all these memory leaks I have been reporting lately.

The reason why I think the problem resides in a core element is because it is really easy to replicate serious memory leaks just by placing different ignite controls inside a component and then destroy such component. I started with tooltips, then combos, then overlays, even with Grids like this example below.

The grid component causes a memory leak when being consumed from child components that are later destroyed. See below to reproduce the issue:

igniteui-angular version: 13.1.18
browser: Tested in Microsoft Edge, but happens in Chrome as well

Steps to reproduce

Use Microsoft Edge as its DevTools contain the Detached Elements panel
Open this stackblitz
Click the CREATE NESTED COMPONENT button
Click the grid's combo to select how many rows to see
Click the DESTROY NESTED COMPONENT button
Open the Detached Elements in DevTools
You will realize that the component cannot be garbage collected

Result

Any child components that contain grids, such as the component in this example, are not properly disposed.

This memory leak only happens when user opens the grid's combo to select how many rows to see.

Expected result

Child components should be properly disposed, no Detached Elements should be left behind.

Attachments

Take a look at this gif that also demonstrates the issue MemoryLeakGrid