search

angular / components

Component infrastructure and Material Design components for Angular
https://material.angular.io
MIT License
24.35k stars 6.74k forks source link

Animations with HostBinding used within Sidenav. Leaks detached DOM nodes #15225

Open FionaTreveil opened 5 years ago

FionaTreveil commented 5 years ago

All DOM elements should be removed when the sidenav is removed

DOM elements relating to TransitionAnimation and all sub-nodes remain as detached

What are the steps to reproduce?

https://stackblitz.com/edit/angular-material2-issue-qnd8ry?file=app%2Ftwo.ts click between links one and two leaves all elements on the page in memory as detached HTML elements

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

Using Chrome and Firefox with Angular animations 7.2.4 and Angular material 7.3.1

Is there anything else we should know?

Similar to closed bugs 18606 and 8862 which are both marked as fixed. The mat-drawer code is including an animation trigger with HostBinding. When the drawer is destroyed, the animation information is not released, leaving references to playersByElement/statesByElement in TransitionAnimationEngine. The result is that all of the nodes within the drawer are left as detached elements when the sidenav is removed.

jelbourn commented 5 years ago

Potentially related to #15322

TrevorBroderick1 commented 2 years ago

Is there any workaround known for this issue? It does not appear to have been fixed with #15322 as I'm still seeing it in Angular 14.1.