fix(animations): enable shadowElements to leave when their parent does (#46459)

dario-piotrowicz · dylhunn · commit b41737038377 · 2022-06-23T13:49:12.000-07:00
when a component uses the shadowDom view encapsulation its children are not rendered as normal HTML children of the element but they are insterted in the element's shadowRoot, this causes the leave of the element not to be normally propagated to the shadow child elements, fix such issue resolves #46450 PR Close #46459
diff --git a/packages/animations/browser/src/render/transition_animation_engine.ts b/packages/animations/browser/src/render/transition_animation_engine.ts
@@ -314,11 +314,13 @@ export class AnimationTransitionNamespace {
 
   private _signalRemovalForInnerTriggers(rootElement: any, context: any) {
     const elements = this._engine.driver.query(rootElement, NG_TRIGGER_SELECTOR, true);
-
+    const shadowElements = rootElement.shadowRoot ?
+        this._engine.driver.query(rootElement.shadowRoot, NG_TRIGGER_SELECTOR, true) :
+        [];
     // emulate a leave animation for all inner nodes within this node.
     // If there are no animations found for any of the nodes then clear the cache
     // for the element.
-    elements.forEach(elm => {
+    [...elements, ...shadowElements].forEach(elm => {
       // this means that an inner remove() operation has already kicked off
       // the animation on this element...
       if (elm[REMOVAL_FLAG]) return;
@@ -402,7 +404,9 @@ export class AnimationTransitionNamespace {
 
   removeNode(element: any, context: any): void {
     const engine = this._engine;
-    if (element.childElementCount) {
+    const elementHasChildren = !!element.childElementCount;
+    const elementHasShadowChildren = !!(element.shadowRoot && element.shadowRoot.childElementCount);
+    if (elementHasChildren || elementHasShadowChildren) {
       this._signalRemovalForInnerTriggers(element, context);
     }
 
diff --git a/packages/core/test/animation/animation_query_integration_spec.ts b/packages/core/test/animation/animation_query_integration_spec.ts
@@ -5,13 +5,13 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
-import {animate, animateChild, AnimationPlayer, AUTO_STYLE, group, query, sequence, stagger, state, style, transition, trigger, ɵAnimationGroupPlayer as AnimationGroupPlayer} from '@angular/animations';
+import {animate, animateChild, AnimationEvent, AnimationPlayer, AUTO_STYLE, group, query, sequence, stagger, state, style, transition, trigger, ɵAnimationGroupPlayer as AnimationGroupPlayer} from '@angular/animations';
 import {AnimationDriver, ɵAnimationEngine, ɵnormalizeKeyframes as normalizeKeyframes} from '@angular/animations/browser';
 import {TransitionAnimationPlayer} from '@angular/animations/browser/src/render/transition_animation_engine';
 import {ENTER_CLASSNAME, LEAVE_CLASSNAME} from '@angular/animations/browser/src/util';
 import {MockAnimationDriver, MockAnimationPlayer} from '@angular/animations/browser/testing';
 import {CommonModule} from '@angular/common';
-import {Component, HostBinding, ViewChild} from '@angular/core';
+import {Component, HostBinding, ViewChild, ViewEncapsulation} from '@angular/core';
 import {fakeAsync, flushMicrotasks, TestBed} from '@angular/core/testing';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
 
@@ -2832,6 +2832,64 @@ describe('animation query tests', function() {
          ]);
        }));
 
+    it(`should emulate a leave animation on a child elements when a parent component using shadowDom leaves the DOM`,
+       fakeAsync(() => {
+         let childLeaveLog = 0;
+
+         @Component({
+           selector: 'ani-host',
+           template: `<ani-parent *ngIf="exp"></ani-parent>`,
+         })
+         class HostCmp {
+           public exp: boolean = false;
+         }
+
+         @Component({
+           selector: 'ani-parent',
+           encapsulation: ViewEncapsulation.ShadowDom,
+           template: `
+              <div @childAnimation (@childAnimation.start)="logChildLeave($event)"></div>
+          `,
+           animations: [
+             trigger(
+                 'childAnimation',
+                 [
+                   transition(':leave', []),
+                 ]),
+           ]
+         })
+         class ParentCmp {
+           logChildLeave(event: AnimationEvent) {
+             if (event.toState === 'void') {
+               childLeaveLog++;
+             }
+           }
+         }
+
+         TestBed.configureTestingModule({declarations: [ParentCmp, HostCmp]});
+
+         const fixture = TestBed.createComponent(HostCmp);
+         const cmp = fixture.componentInstance;
+
+         const updateExpAndFlush = (value: boolean) => {
+           cmp.exp = value;
+           fixture.detectChanges();
+           flushMicrotasks();
+         };
+
+         updateExpAndFlush(true);
+         expect(childLeaveLog).toEqual(0);
+
+         updateExpAndFlush(false);
+         expect(childLeaveLog).toEqual(1);
+
+         updateExpAndFlush(true);
+         expect(childLeaveLog).toEqual(1);
+
+         updateExpAndFlush(false);
+         expect(childLeaveLog).toEqual(2);
+       }));
+
     it('should build, but not run sub triggers when a parent animation is scheduled', () => {
       @Component({
         selector: 'parent-cmp',
