igx-select memory leak

[pmoleri]

Description

igx-select leaks itself and can make leak other components such as Grid.
related: #11672

• igniteui-angular version: 17.0.13
• browser: all

Steps to reproduce (Chrome)

1. Add a igx-select (see attached stackblitz)

2. set it up with an ngIf so it can be destroyed and re-created as many times as you want

3. open the select

4. destroy without closing the dropdown

5. re-create it and repeat

6. Open Dev Tools / Memory tab (Chrome)

7. Take a memory snapshot (if there's more than one process it's important to pick the correct one)

8. Search for IgxSelectItemComponent (or "Detached HTMLElement" if you're using production build).
   -> Here you can confirm that there are many leaked elements
   

9. Search for IgxSelectionAPIService, select the instance and hover it to inspect its contents
   -> There are entries holding those elements:
   

10. Right click to store it as a global var (temp1 in this example)

11. In the console run temp1.selection.clear()

12. Grab a new snapshot and search again
    -> Now only the Service and Module are there.
    

Result

There are memory leaks as verified in the steps

Expected result

No memory leaks

Attachments

Stackbliz: https://stackblitz.com/edit/hr9mt8?file=src%2Fapp%2Fselect-sample-1%2Fselect-sample-1.component.html,src%2Fapp%2Fselect-sample-1%2Fselect-sample-1.component.ts

[pmoleri]

Analysis of the issue:

There's a root (singleton) service keeping track of selected items for any select/dropdown out there.

Even though the DropDown attempts to clear on destroy

The Select overrides it and doesn't call the super, producing the leak.

Even if fixing the above would prevent the issue, I believe having a root service is adding unnecessary complexity and pitfalls. You can have a per-instance service:

One more note. Currently the cleanup, even if it was correct, it's keeping 2 empty Set() for every select/dropdown that has ever been created. So that, even if minor, it's another leak and wrong.

[jsakamoto]

@pmoleri Please remember that kind of memory leak issues may happen not only in the "igx-select" but also in "igx-grid," "igx-chip," "igx-data-chart," etc.
See also: https://discord.com/channels/836634487483269200/836636712292581456/1205547850411544637

[Lipata]

@pmoleri, @jsakamoto this is the fix that will remove the memory leak: https://github.com/IgniteUI/igniteui-angular/pull/13926/files#diff-2b12c6b9ff35bdd97b9a62948ada434845879e91b45cdc33415f98260a2ffa9bL554. @pmoleri thank you for all the suggestions! We will apply the one above and in a separate PR will make the selection service imported on a component level instead of on a root level, which will also remove the need to delete the empty sets that are currently left on each selection.

[jsakamotoIGJP]

Hi @Lipata, thank you for your quick response!

By the way, I have a question regarding the memory leak issue that was brought up on the Discord server (see also here). Will the other components mentioned by the user, such as igx-grid and igx-chip, be fixed soon? Or should I log them as separate issues?

Thank you for your help!

[Lipata]

@pmoleri in addition to my previous comment - we removed the select memory leak and also now the selection service is deleting the set when the selection is empty instead of setting it as an empty set. Providing the selection service on a component level instead of on a root, will not happen, as per #13938 (comment):

Clarification on the rejected status - after discussing today again, we're actually of the opinion this change might not be desirable. The root-provided service should only be included when actually needed and tree-shaken otherwise and, once the related leak was resolved, its overhead (empty map more/less) is quite minimal. On the other hand, providing it per component (sandboxing it) will create instance per component and there's a real concern with repeated/templated Selects/Combos for example and more dropdowns around the view UI we can end up with a hefty number of instances, which could be a worse tradeoff.

[jsakamotoIGJP]

@Lipata Could you please address another memory-leaking issue as below?

• igx-grid memory leak when users moved columns #13993
• igx-grid memory leak when users click pagination buttons #13994
• igx-data-chart memory leak when there are two or more charts with the same sync channel #13995

Thanks in advance.