fix(select): fix select panel animation (#2699)

Fixes #2695
angular · Jan 18, 2017 · 15eb33a · 15eb33a
1 parent e055d05
commit 15eb33a
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 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,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;
   }