Components: Bug: dialog causing detached DOM tree

[shaniqwa]

Bug, feature request, or proposal:

Bug

What is the expected behavior?

avoid memory leaks

What is the current behavior?

each time a material dialog is opened, another detached DOM tree is added

What are the steps to reproduce?

I'm experiencing this behaviour in angular-electron app, I suspect it has something to do with electron since this is not happening in any other apps. Added a gif showing snapshots before and after opening the dialog few times. (this is happening with any dialog across this app, not only the one in this example.)

What is the use-case or motivation for changing an existing behavior?

I hope this is not happening to others, it's causing huge memory leak and after few hours the app gets very slow.

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

electron 2
angular 5.2.5
material 5.2.5
typescript 2.6.2

edit: also tested with -
electron 2.0.3
angular 6.0.5
material 6.3.2
typescript 2.7.2

same behaivouer

Is there anything else we should know?

I'm not 100% sure the problem is with material, but if it is its important that you know about this.

[tesseris]

I'm facing the exact same issue. I believe I narrowed it down to the mat-form-field inside the component which is loaded inside the MatDialog.

MatDialog loading a component which contains a form with MatFormFields causes detached nodes.

[shaniqwa]

most of my dialogs contain forms, so that make sense

[tesseris]

I have noticed the same behavior at the dialog's demo page.

Attached the memory snapshot after opening the dialog several times.

[tesseris]

Any update on this?

[tesseris]

The issue still persists in version 8.2.

[njofce]

Any progress on the issue so far? @crisbeto

[techn1fire]

I'm having this issue on Angular 9.1.9, Material 9.2.4
Specifically with mat-form-field inside dialogs using a reactive form. Simply clicking on the form fields causes the memory usage to jump - starts to cause lag with animations no longer rendering in the dialog, and actions taking longer to complete.

[devversion]

It looks like the root cause has been fixed with https://github.com/crisbeto/angular/commit/3c9c3605786a7c4108ce73f365c4f7984c15fb11.

Locally you will most likely still see a few references in the DevTools but that happens because dev tools seem to keep a reference to the last activated element. i.e. the form-field when it got auto-focused. If you click on another element after closing the dialog, no detached elements can be found.

Closing as this has been fixed.

[angular-automatic-lock-bot[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._}