From 2d619394e6e09e31a8eae437c3dfefe76ba5fb16 Mon Sep 17 00:00:00 2001
From: Kara Erickson <karakara@google.com>
Date: Tue, 17 Jan 2017 11:52:02 -0800
Subject: [PATCH] fix(select): fix select panel animation

Fixes #2695
---
 src/lib/select/select.html |  2 +-
 src/lib/select/select.ts   | 10 ++++++++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/lib/select/select.html b/src/lib/select/select.html
index a37b2f796616..61e55e51a4e9 100644
--- a/src/lib/select/select.html
+++ b/src/lib/select/select.html
@@ -11,7 +11,7 @@
   <div class="md-select-panel" [@transformPanel]="'showing'" (@transformPanel.done)="_onPanelDone()"
     (keydown)="_keyManager.onKeydown($event)" [style.transformOrigin]="_transformOrigin"
       [class.md-select-panel-done-animating]="_panelDoneAnimating">
-    <div class="md-select-content" [@fadeInContent]="'showing'">
+    <div class="md-select-content" [@fadeInContent]="'showing'" (@fadeInContent.done)="_onFadeInDone()">
       <ng-content></ng-content>
     </div>
   </div>
diff --git a/src/lib/select/select.ts b/src/lib/select/select.ts
index c82cc0fcecbe..91d9c513979d 100644
--- a/src/lib/select/select.ts
+++ b/src/lib/select/select.ts
@@ -362,8 +362,8 @@ export class MdSelect implements AfterContentInit, ControlValueAccessor, OnDestr
   }
 
   /**
-   * When the panel is finished animating, emits an event and focuses
-   * an option if the panel is open.
+   * When the panel element is finished transforming in (though not fading in), it
+   * emits an event and focuses an option if the panel is open.
    */
   _onPanelDone(): void {
     if (this.panelOpen) {
@@ -372,7 +372,13 @@ export class MdSelect implements AfterContentInit, ControlValueAccessor, OnDestr
     } else {
       this.onClose.emit();
     }
+  }
 
+  /**
+   * When the panel content is done fading in, the _panelDoneAnimating property is
+   * set so the proper class can be added to the panel.
+   */
+  _onFadeInDone(): void {
     this._panelDoneAnimating = this.panelOpen;
   }