From a34912babd06b1de2564d44ac1b7ecfda69a0d06 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Thu, 21 Apr 2022 11:56:37 +0200 Subject: [PATCH] fix(cdk/overlay): animations interrupted on repeat insertions When an overlay is detached, we remove it from the change detection tree and the DOM, but we don't destroy it completely so that it can be re-attached. Re-attachment is the same process, but in reverse: we re-add the element to the DOM and the change detection tree. The problem is that we were attaching the element to the change detection tree before re-inserting it into the DOM which caused the Angular animations package not to animate the element since it's not in the DOM yet. These changes resolve the issue by attaching the element to the DOM first. Fixes #24749. --- src/cdk/overlay/overlay-ref.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/cdk/overlay/overlay-ref.ts b/src/cdk/overlay/overlay-ref.ts index c1909d2e9beb..9fc473a37e68 100644 --- a/src/cdk/overlay/overlay-ref.ts +++ b/src/cdk/overlay/overlay-ref.ts @@ -106,13 +106,14 @@ export class OverlayRef implements PortalOutlet, OverlayReference { * @returns The portal attachment result. */ attach(portal: Portal): any { - let attachResult = this._portalOutlet.attach(portal); - - // Update the pane element with the given configuration. + // Insert the host into the DOM before attaching the portal, otherwise + // the animations module will skip animations on repeat attachments. if (!this._host.parentElement && this._previousHostParent) { this._previousHostParent.appendChild(this._host); } + const attachResult = this._portalOutlet.attach(portal); + if (this._positionStrategy) { this._positionStrategy.attach(this); }