From 03d49082053b0feb0ecbc422e9c9adc7b96f0d2c Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Thu, 8 Dec 2016 21:07:46 +0100
Subject: [PATCH 1/5] fix(select): transparent background when overscrolling

Fixes the select being transparent on browsers that allow overscrolling (mostly mobile).
---
 src/lib/select/_select-theme.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/select/_select-theme.scss b/src/lib/select/_select-theme.scss
index 43a046737cca..d8a6cdc1a75a 100644
--- a/src/lib/select/_select-theme.scss
+++ b/src/lib/select/_select-theme.scss
@@ -34,7 +34,7 @@
     }
   }
 
-  .md-select-content {
+  .md-select-panel {
     background: md-color($background, card);
   }
 

From 7450da714a755c00cd39c3ec2575faf7d9264b25 Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Fri, 9 Dec 2016 22:57:43 +0100
Subject: [PATCH 2/5] Add the panel background after the animations are done.

---
 src/lib/select/_select-theme.scss | 2 +-
 src/lib/select/select.html        | 5 +++--
 src/lib/select/select.ts          | 5 +++++
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/lib/select/_select-theme.scss b/src/lib/select/_select-theme.scss
index d8a6cdc1a75a..f9e10dbb172e 100644
--- a/src/lib/select/_select-theme.scss
+++ b/src/lib/select/_select-theme.scss
@@ -34,7 +34,7 @@
     }
   }
 
-  .md-select-panel {
+  .md-select-content, .md-select-panel-done-animating {
     background: md-color($background, card);
   }
 
diff --git a/src/lib/select/select.html b/src/lib/select/select.html
index 8c64b1567c5d..2e14d720f7bd 100644
--- a/src/lib/select/select.html
+++ b/src/lib/select/select.html
@@ -5,11 +5,12 @@
   <span class="md-select-arrow"></span>
 </div>
 
-<template cdk-connected-overlay [origin]="origin"  [open]="panelOpen" hasBackdrop (backdropClick)="close()"
+<template cdk-connected-overlay [origin]="origin" [open]="panelOpen" hasBackdrop (backdropClick)="close()"
   backdropClass="cdk-overlay-transparent-backdrop" [positions]="_positions" [minWidth]="_triggerWidth"
   [offsetY]="_offsetY" [offsetX]="_offsetX" (attach)="_setScrollTop()">
   <div class="md-select-panel" [@transformPanel]="'showing'" (@transformPanel.done)="_onPanelDone()"
-    (keydown)="_keyManager.onKeydown($event)" [style.transformOrigin]="_transformOrigin">
+    (keydown)="_keyManager.onKeydown($event)" [style.transformOrigin]="_transformOrigin"
+      [ngClass]="_panelDoneAnimating ? 'md-select-panel-done-animating' : ''">
     <div class="md-select-content" [@fadeInContent]="'showing'">
       <ng-content></ng-content>
     </div>
diff --git a/src/lib/select/select.ts b/src/lib/select/select.ts
index 8f2189af1fad..91bf1f9edae2 100644
--- a/src/lib/select/select.ts
+++ b/src/lib/select/select.ts
@@ -147,6 +147,9 @@ export class MdSelect implements AfterContentInit, ControlValueAccessor, OnDestr
   /** The value of the select panel's transform-origin property. */
   _transformOrigin: string = 'top';
 
+  /** Whether the panel's animation is done. */
+  _panelDoneAnimating: boolean = false;
+
   /**
    * The x-offset of the overlay panel in relation to the trigger's top start corner.
    * This must be adjusted to align the selected option text over the trigger text when
@@ -345,6 +348,8 @@ export class MdSelect implements AfterContentInit, ControlValueAccessor, OnDestr
     } else {
       this.onClose.emit();
     }
+
+    this._panelDoneAnimating = true;
   }
 
   /**

From e24c25e337831ba0b7078d986840304b874f47a3 Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Tue, 13 Dec 2016 21:27:49 +0100
Subject: [PATCH 3/5] Reduce expression verbosity

---
 src/lib/select/select.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/select/select.html b/src/lib/select/select.html
index 2e14d720f7bd..a37b2f796616 100644
--- a/src/lib/select/select.html
+++ b/src/lib/select/select.html
@@ -10,7 +10,7 @@
   [offsetY]="_offsetY" [offsetX]="_offsetX" (attach)="_setScrollTop()">
   <div class="md-select-panel" [@transformPanel]="'showing'" (@transformPanel.done)="_onPanelDone()"
     (keydown)="_keyManager.onKeydown($event)" [style.transformOrigin]="_transformOrigin"
-      [ngClass]="_panelDoneAnimating ? 'md-select-panel-done-animating' : ''">
+      [class.md-select-panel-done-animating]="_panelDoneAnimating">
     <div class="md-select-content" [@fadeInContent]="'showing'">
       <ng-content></ng-content>
     </div>

From 5fc78cf6c528c31989626d5981638c73fac58c18 Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Tue, 13 Dec 2016 21:27:59 +0100
Subject: [PATCH 4/5] Reset the color on close.

---
 src/lib/select/select.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/select/select.ts b/src/lib/select/select.ts
index 91bf1f9edae2..5da294f03c38 100644
--- a/src/lib/select/select.ts
+++ b/src/lib/select/select.ts
@@ -349,7 +349,7 @@ export class MdSelect implements AfterContentInit, ControlValueAccessor, OnDestr
       this.onClose.emit();
     }
 
-    this._panelDoneAnimating = true;
+    this._panelDoneAnimating = this.panelOpen;
   }
 
   /**

From 7c0dd1c416a9bb4efba22195d1a34a358904b568 Mon Sep 17 00:00:00 2001
From: crisbeto <crisbeto@abv.bg>
Date: Tue, 13 Dec 2016 21:49:56 +0100
Subject: [PATCH 5/5] Add a unit test to verify that the class is added to the
 panel.

---
 src/lib/select/select.spec.ts | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/lib/select/select.spec.ts b/src/lib/select/select.spec.ts
index 44935ebd5de3..356e4228ae20 100644
--- a/src/lib/select/select.spec.ts
+++ b/src/lib/select/select.spec.ts
@@ -1,4 +1,4 @@
-import {TestBed, async, ComponentFixture} from '@angular/core/testing';
+import {TestBed, async, ComponentFixture, fakeAsync, tick} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
 import {Component, DebugElement, QueryList, ViewChild, ViewChildren} from '@angular/core';
 import {MdSelectModule} from './index';
@@ -542,6 +542,20 @@ describe('MdSelect', () => {
         expect(fixture.componentInstance.select._placeholderState).toEqual('floating-rtl');
       });
 
+
+      it('should add a class to the panel when the menu is done animating', fakeAsync(() => {
+        trigger.click();
+        fixture.detectChanges();
+
+        const panel = overlayContainerElement.querySelector('.md-select-panel');
+
+        expect(panel.classList).not.toContain('md-select-panel-done-animating');
+
+        tick(250);
+        fixture.detectChanges();
+
+        expect(panel.classList).toContain('md-select-panel-done-animating');
+      }));
   });
 
   describe('positioning', () => {