mat-select memory leak, DOM nodes count increase

[c214153]

What is the expected behavior?

Including a mat-select component and opening it in a dialog should not cause memory leaks/DOM nodes increase.

What is the current behavior?

In Angular Material 2 and 5, if mat-select was opened in a dialog (not necessary to select anything), closing the dialog will increase DOM nodes count.
In versions 6 and 7, the DOM nodes count will increase even it the mat-select was not opened.

What are the steps to reproduce?

Versions:
4 - https://angular-material-2-select-leak.stackblitz.io
5 - https://angular-material-5-select-leak.stackblitz.io
6 - https://angular-material-6-select-leak.stackblitz.io
7 - https://angular-material-7-select-leak.stackblitz.io
(the resulting window links, stackblitz edit links below)

1. Open the dialog by pressing the button. Open the select menu. Close the dialog.
   (versions 6 & 7 do not required the select being opened, will still leak)
2. Repeat 1) a couple of times to avoid lazy loading effects.
3. Run garbage collector (F12, Memory tab, garbage can icon)
4. Memorize DOM nodes count (F12, Performance monitor)
5. Do 1), then garbage collect.
6. The DOM nodes count will increase in every such action.

Stackblitz editable links:
2 - https://stackblitz.com/edit/angular-material-2-select-leak
5 - https://stackblitz.com/edit/angular-material-5-select-leak
6 - https://stackblitz.com/edit/angular-material-6-select-leak
7 - https://stackblitz.com/edit/angular-material-7-select-leak

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 4, 5, 6, 7; Angular Material 2, 5, 6, 7
Windows 10, Chrome 70, Typescript 3

Is there anything else we should know?

Similar functionality can be achieved with mat-menu component. It does not produce memory leaks in all versions.
A workaround is possible with autocomplete as well,, however in version 6 & 7 it also leaks.

[abdulrahman-khankan]

@crisbeto @vivian-hu is there any update on this?

We see quite a big increase in nodes in memory in our stress tests. After a lot of constructing, selecting, and destroying iterations, the number of nodes in memory is growing from about 2k nodes to 15k nodes.

[jelbourn]

@crisbeto got an escalation on this one from a Google team today

[crisbeto]

Fixed in core by angular/angular#34409. The fix should be out in the next patch version.

[KarthikeyanP21]

@crisbeto, @vivian-hu, I also facing the same issue where DOM nodes are not getting released and it's accumulated in browser memory for long time. After updating the patch version (9.0.0-rc.7) still memory leak issues persists.

Packages Used:

"@angular/cli": "^7.3.8",
"@angular/animations": "9.0.0-rc.7",
"@angular/cdk": "^7.3.3",
"@angular/common": "~7.0.0",
"@angular/compiler": "~7.0.0",
"@angular/core": "~7.0.0",
"@angular/forms": "~7.0.0",
"@angular/http": "~7.0.0",
"@angular/material": "^7.0.3",
"@angular/material-moment-adapter": "^7.0.3",
"@angular/platform-browser": "~7.0.0",
"@angular/platform-browser-dynamic": "~7.0.0",
"@angular/router": "~7.0.0",

Please correct me the right version of angular dependencies will suitable for this patch.

[Splaktar]

@KarthikeyanP21 Thank you for testing this fix. However, that's not really an officially supported configuration (using version 7 and version 9 Angular libraries together). Are you able to test with all versions of Angular and the CLI on 9.0.0-rc.7 and Angular Material/CDK on 9.0.0-rc.6?

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}