components icon indicating copy to clipboard operation
components copied to clipboard

Animations with HostBinding used within Sidenav. Leaks detached DOM nodes

Open FionaTreveil opened this issue 6 years ago • 2 comments

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.

FionaTreveil avatar Feb 18 '19 12:02 FionaTreveil

Potentially related to #15322

jelbourn avatar May 12 '19 15:05 jelbourn

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.

TrevorBroderick1 avatar Aug 31 '22 21:08 TrevorBroderick1