fix(select): fix select panel animation

Fixes angular#2695
kara · Jan 17, 2017 · e60d2f1 · e60d2f1
1 parent 1161c03
commit e60d2f1
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git 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
@@ -362,7 +362,7 @@ export class MdSelect implements AfterContentInit, ControlValueAccessor, OnDestr
   }
 
   /**
-   * When the panel is finished animating, emits an event and focuses
+   * When the panel is finished animating in, emits an event and focuses
    * an option if the panel is open.
    */
   _onPanelDone(): void {
@@ -372,7 +372,13 @@ export class MdSelect implements AfterContentInit, ControlValueAccessor, OnDestr
     } else {
       this.onClose.emit();
     }
+  }
 
+  /**
+   * When the panel 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;
   }