From 68d09ddecdde594ed395e0ec580c4b403663f8de Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Fri, 22 Apr 2022 20:17:24 +0200 Subject: [PATCH] fix(cdk/overlay): animations interrupted on repeat insertions (#24815) 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. (cherry picked from commit 0faba6e5fcb3ebed7fad497fb5938bde47827c9a) --- 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 0f6195534f88..e0d7ceabfc35 100644 --- a/src/cdk/overlay/overlay-ref.ts +++ b/src/cdk/overlay/overlay-ref.ts @@ -105,13 +105,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); }