fix(select): close the panel when pressing escape

* Closes the `md-select` panel when pressing escape in the same way as the native select.
* Adds an `escape` observable to the `ListKeyManager`, because we'll likely need this on other components.
* Adds a missing test to ensure that the select closes when tabbing out.

Author: crisbeto

src/lib/core/a11y/list-key-manager.spec.ts

@@ -1,7 +1,7 @@
 import {QueryList} from '@angular/core';
 import {fakeAsync, tick} from '@angular/core/testing';
 import {FocusKeyManager} from './focus-key-manager';
-import {DOWN_ARROW, UP_ARROW, TAB, HOME, END} from '../keyboard/keycodes';
+import {DOWN_ARROW, UP_ARROW, TAB, HOME, END, ESCAPE} from '../keyboard/keycodes';
 import {ListKeyManager} from './list-key-manager';
 import {ActiveDescendantKeyManager} from './activedescendant-key-manager';
 
@@ -39,6 +39,7 @@ describe('Key managers', () => {
   let TAB_EVENT: KeyboardEvent;
   let HOME_EVENT: KeyboardEvent;
   let END_EVENT: KeyboardEvent;
+  let ESCAPE_EVENT: KeyboardEvent;
 
   beforeEach(() => {
     itemList = new FakeQueryList<any>();
@@ -48,7 +49,7 @@ describe('Key managers', () => {
     TAB_EVENT = new FakeEvent(TAB) as KeyboardEvent;
     HOME_EVENT = new FakeEvent(HOME) as KeyboardEvent;
     END_EVENT = new FakeEvent(END) as KeyboardEvent;
-
+    ESCAPE_EVENT = new FakeEvent(ESCAPE) as KeyboardEvent;
   });
 
 
@@ -218,11 +219,11 @@ describe('Key managers', () => {
       });
 
       it('should emit tabOut when the tab key is pressed', () => {
-        let tabOutEmitted = false;
-        keyManager.tabOut.first().subscribe(() => tabOutEmitted = true);
+        let spy = jasmine.createSpy('tabOut spy');
+        keyManager.tabOut.first().subscribe(spy);
         keyManager.onKeydown(TAB_EVENT);
 
-        expect(tabOutEmitted).toBe(true);
+        expect(spy).toHaveBeenCalled();
       });
 
       it('should prevent the default keyboard action', () => {
@@ -241,6 +242,14 @@ describe('Key managers', () => {
         expect(TAB_EVENT.defaultPrevented).toBe(false);
       });
 
+      it('should emit an event when escape is pressed', () => {
+        let spy = jasmine.createSpy('escape spy');
+        keyManager.escape.first().subscribe(spy);
+        keyManager.onKeydown(ESCAPE_EVENT);
+
+        expect(spy).toHaveBeenCalled();
+      });
+
       it('should activate the first item when pressing down on a clean key manager', () => {
         keyManager = new ListKeyManager<FakeFocusable>(itemList);
 

src/lib/core/a11y/list-key-manager.ts

@@ -1,5 +1,5 @@
 import {QueryList} from '@angular/core';
-import {UP_ARROW, DOWN_ARROW, TAB, HOME, END} from '../core';
+import {UP_ARROW, DOWN_ARROW, TAB, HOME, END, ESCAPE} from '../core';
 import {Observable} from 'rxjs/Observable';
 import {Subject} from 'rxjs/Subject';
 
@@ -18,7 +18,8 @@ export interface CanDisable {
 export class ListKeyManager<T extends CanDisable> {
   private _activeItemIndex: number = null;
   private _activeItem: T;
-  private _tabOut: Subject<any> = new Subject();
+  private _tabOut = new Subject<void>();
+  private _escape = new Subject<void>();
   private _wrap: boolean = false;
 
   constructor(private _items: QueryList<T>) {
@@ -63,6 +64,9 @@ export class ListKeyManager<T extends CanDisable> {
       case END:
         this.setLastItemActive();
         break;
+      case ESCAPE:
+        this._escape.next(null);
+        break;
       case TAB:
         // Note that we shouldn't prevent the default action on tab.
         this._tabOut.next(null);
@@ -121,6 +125,14 @@ export class ListKeyManager<T extends CanDisable> {
     return this._tabOut.asObservable();
   }
 
+  /**
+   * Observable that emits whenever the escape key is pressed, which usually indicates
+   * that the component should be closed.
+   */
+  get escape(): Observable<void> {
+    return this._escape.asObservable();
+  }
+
   /**
    * This method sets the active item, given a list of items and the delta between the
    * currently active item and the new active item. It will calculate differently

src/lib/select/select.spec.ts

@@ -20,8 +20,9 @@ import {
   ControlValueAccessor, FormControl, FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule
 } from '@angular/forms';
 import {ViewportRuler} from '../core/overlay/position/viewport-ruler';
-import {dispatchFakeEvent} from '../core/testing/dispatch-events';
+import {dispatchFakeEvent, dispatchKeyboardEvent} from '../core/testing/dispatch-events';
 import {wrappedErrorMessage} from '../core/testing/wrapped-error-message';
+import {TAB, ESCAPE} from '../core/keyboard/keycodes';
 
 
 describe('MdSelect', () => {
@@ -205,6 +206,34 @@ describe('MdSelect', () => {
       });
     }));
 
+    it('should close the panel when tabbing out', async(() => {
+      trigger.click();
+      fixture.detectChanges();
+      expect(fixture.componentInstance.select.panelOpen).toBe(true);
+
+      const panel = overlayContainerElement.querySelector('.mat-select-panel');
+      dispatchKeyboardEvent(panel, 'keydown', TAB);
+      fixture.detectChanges();
+
+      fixture.whenStable().then(() => {
+        expect(fixture.componentInstance.select.panelOpen).toBe(false);
+      });
+    }));
+
+    it('should close the panel when pressing escape', async(() => {
+      trigger.click();
+      fixture.detectChanges();
+      expect(fixture.componentInstance.select.panelOpen).toBe(true);
+
+      const panel = overlayContainerElement.querySelector('.mat-select-panel');
+      dispatchKeyboardEvent(panel, 'keydown', ESCAPE);
+      fixture.detectChanges();
+
+      fixture.whenStable().then(() => {
+        expect(fixture.componentInstance.select.panelOpen).toBe(false);
+      });
+    }));
+
   });
 
   describe('selection logic', () => {

src/lib/select/select.ts

@@ -130,8 +130,8 @@ export class MdSelect implements AfterContentInit, OnDestroy, OnInit, ControlVal
   /** Subscription to changes in the option list. */
   private _changeSubscription: Subscription;
 
-  /** Subscription to tab events while overlay is focused. */
-  private _tabSubscription: Subscription;
+  /** Subscription to tab and escape presses while overlay is focused. */
+  private _closeKeySubscription: Subscription;
 
   /** Whether filling out the select is required in the form.  */
   private _required: boolean = false;
@@ -337,8 +337,8 @@ export class MdSelect implements AfterContentInit, OnDestroy, OnInit, ControlVal
       this._changeSubscription.unsubscribe();
     }
 
-    if (this._tabSubscription) {
-      this._tabSubscription.unsubscribe();
+    if (this._closeKeySubscription) {
+      this._closeKeySubscription.unsubscribe();
     }
   }
 
@@ -569,7 +569,9 @@ export class MdSelect implements AfterContentInit, OnDestroy, OnInit, ControlVal
   /** Sets up a key manager to listen to keyboard events on the overlay panel. */
   private _initKeyManager() {
     this._keyManager = new FocusKeyManager(this.options);
-    this._tabSubscription = this._keyManager.tabOut.subscribe(() => this.close());
+    this._closeKeySubscription = Observable
+      .merge(this._keyManager.tabOut, this._keyManager.escape)
+      .subscribe(() => this.close());
   }
 
   /** Drops current option subscriptions and IDs and resets from scratch. */