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.

Author: crisbeto

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);
   }
 

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>

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', () => {

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;
   }
 
   /**