From d9b2d85ef22c3b6ccdb49499897c64620c10b8a2 Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@users.noreply.github.com>
Date: Thu, 12 Jan 2017 22:23:25 +0100
Subject: [PATCH] fix(select): transparent background when overscrolling
 (#2117)

* fix(select): transparent background when overscrolling

Fixes the select being transparent on browsers that allow overscrolling (mostly mobile).

* Add the panel background after the animations are done.

* Reduce expression verbosity

* Reset the color on close.

* Add a unit test to verify that the class is added to the panel.
---
 src/lib/select/_select-theme.scss |  2 +-
 src/lib/select/select.html        |  5 +++--
 src/lib/select/select.spec.ts     | 16 +++++++++++++++-
 src/lib/select/select.ts          |  5 +++++
 4 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/src/lib/select/_select-theme.scss b/src/lib/select/_select-theme.scss
index 847a0728e47..bb33ea354fa 100644
--- a/src/lib/select/_select-theme.scss
+++ b/src/lib/select/_select-theme.scss
@@ -34,7 +34,7 @@
     }
   }
 
-  .md-select-content {
+  .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 8c64b1567c5..a37b2f79661 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"
+      [class.md-select-panel-done-animating]="_panelDoneAnimating">
     <div class="md-select-content" [@fadeInContent]="'showing'">
       <ng-content></ng-content>
     </div>
diff --git a/src/lib/select/select.spec.ts b/src/lib/select/select.spec.ts
index c2e3e6a12d5..12739be3252 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';
@@ -539,6 +539,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', () => {
diff --git a/src/lib/select/select.ts b/src/lib/select/select.ts
index 8f408c1f15f..ef218bafb77 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
@@ -353,6 +356,8 @@ export class MdSelect implements AfterContentInit, ControlValueAccessor, OnDestr
     } else {
       this.onClose.emit();
     }
+
+    this._panelDoneAnimating = this.panelOpen;
   }
 
   /**