From 39ddff95ec1a3c5065acba5a4d561624789d910e Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Wed, 13 Jun 2018 20:25:19 +0200
Subject: [PATCH] fix(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/lib/expansion/expansion-animations.ts | 11 +++++++----
 src/lib/expansion/expansion-panel.ts      |  3 +--
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/lib/expansion/expansion-animations.ts b/src/lib/expansion/expansion-animations.ts
index 47e243f9d1ee..572e037d5452 100644
--- a/src/lib/expansion/expansion-animations.ts
+++ b/src/lib/expansion/expansion-animations.ts
@@ -35,7 +35,7 @@ export const matExpansionAnimations: {
 
   /** Animation that expands and collapses the panel header height. */
   expansionHeaderHeight: trigger('expansionHeight', [
-    state('collapsed', style({
+    state('collapsed, void', style({
       height: '{{collapsedHeight}}',
     }), {
       params: {collapsedHeight: '48px'},
@@ -45,7 +45,7 @@ export const matExpansionAnimations: {
     }), {
       params: {expandedHeight: '64px'}
     }),
-    transition('expanded <=> collapsed', group([
+    transition('expanded <=> collapsed, expanded <=> void', group([
       query('@indicatorRotate', animateChild(), {optional: true}),
       animate(EXPANSION_PANEL_ANIMATION_TIMING),
     ])),
@@ -53,8 +53,11 @@ export const matExpansionAnimations: {
 
   /** Animation that expands and collapses the panel content. */
   bodyExpansion: trigger('bodyExpansion', [
-    state('collapsed', style({height: '0px', visibility: 'hidden'})),
+    // 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', animate(EXPANSION_PANEL_ANIMATION_TIMING)),
+    transition('expanded <=> collapsed, expanded <=> void',
+        animate(EXPANSION_PANEL_ANIMATION_TIMING)),
   ])
 };
diff --git a/src/lib/expansion/expansion-panel.ts b/src/lib/expansion/expansion-panel.ts
index e40071b8d406..dbd82221ae87 100644
--- a/src/lib/expansion/expansion-panel.ts
+++ b/src/lib/expansion/expansion-panel.ts
@@ -163,8 +163,7 @@ export class MatExpansionPanel extends CdkAccordionItem
     // with doing it via change detection.
     if (phaseName === 'done' && toState === 'expanded') {
       classList.add(cssClass);
-    }
-    if (phaseName === 'start' && toState === 'collapsed') {
+    } else if (phaseName === 'start' && (toState === 'collapsed' || toState === 'void')) {
       classList.remove(cssClass);
     }