From 16fe90ef32ca62e05082455296168b90ec7baeb7 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Mon, 31 May 2021 19:42:52 +0200 Subject: [PATCH] fix(material/expansion): panel appearing as open when parent is animating away Fixes an issue where the expansion panel will appear as if it is open, if the element is part of a component that is animating away. The issue comes from the fact that Angular resets the animation state to `void` which we don't have in the animation definitions. Fixes #11765. --- src/material/expansion/expansion-animations.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/material/expansion/expansion-animations.ts b/src/material/expansion/expansion-animations.ts index f2a476ecc247..83bb662ad6ab 100644 --- a/src/material/expansion/expansion-animations.ts +++ b/src/material/expansion/expansion-animations.ts @@ -53,9 +53,11 @@ export const matExpansionAnimations: { ]), /** Animation that expands and collapses the panel content. */ bodyExpansion: trigger('bodyExpansion', [ + // Note: we also have `void` here as a fallback, because Angular will reset the + // state back to void when the element is being removed. See #11765. state('collapsed, void', style({height: '0px', visibility: 'hidden'})), state('expanded', style({height: '*', visibility: 'visible'})), - transition('expanded <=> collapsed, void => collapsed', - animate(EXPANSION_PANEL_ANIMATION_TIMING)), + transition('expanded <=> collapsed, expanded <=> void, void => collapsed', + animate(EXPANSION_PANEL_ANIMATION_TIMING)), ]) };