refactor(datepicker): use common overlay keyboard handling

Switches the datepicker to use the `OverlayKeyboardDispatcher`, rather than managing the keyboard logic itself. This simplifies things and handles the cases where the popup won't close if it lost focus.

Author: crisbeto

src/lib/datepicker/datepicker.spec.ts

@@ -1,12 +1,6 @@
 import {ENTER, ESCAPE, RIGHT_ARROW} from '@angular/cdk/keycodes';
 import {OverlayContainer} from '@angular/cdk/overlay';
-import {
-  createKeyboardEvent,
-  dispatchEvent,
-  dispatchFakeEvent,
-  dispatchKeyboardEvent,
-  dispatchMouseEvent,
-} from '@angular/cdk/testing';
+import {dispatchFakeEvent, dispatchKeyboardEvent, dispatchMouseEvent} from '@angular/cdk/testing';
 import {Component, ViewChild} from '@angular/core';
 import {async, ComponentFixture, inject, TestBed} from '@angular/core/testing';
 import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
@@ -170,21 +164,12 @@ describe('MatDatepicker', () => {
         testComponent.datepicker.open();
         fixture.detectChanges();
 
-        let content = document.querySelector('.cdk-overlay-pane mat-datepicker-content')!;
-        expect(content).toBeTruthy('Expected datepicker to be open.');
-
-        const keyboardEvent = createKeyboardEvent('keydown', ESCAPE);
-        const stopPropagationSpy = spyOn(keyboardEvent, 'stopPropagation').and.callThrough();
+        expect(testComponent.datepicker.opened).toBe(true, 'Expected datepicker to be open.');
 
-        dispatchEvent(content, keyboardEvent);
+        dispatchKeyboardEvent(document.body, 'keydown', ESCAPE);
         fixture.detectChanges();
 
-        content = document.querySelector('.cdk-overlay-pane mat-datepicker-content')!;
-
-        expect(content).toBeFalsy('Expected datepicker to be closed.');
-        expect(stopPropagationSpy).toHaveBeenCalled();
-        expect(keyboardEvent.defaultPrevented)
-            .toBe(true, 'Expected default ESCAPE action to be prevented.');
+        expect(testComponent.datepicker.opened).toBe(false, 'Expected datepicker to be closed.');
       });
 
       it('close should close dialog', async(() => {

src/lib/datepicker/datepicker.ts

@@ -19,6 +19,7 @@ import {
 } from '@angular/cdk/overlay';
 import {ComponentPortal} from '@angular/cdk/portal';
 import {take} from 'rxjs/operators/take';
+import {filter} from 'rxjs/operators/filter';
 import {
   AfterContentInit,
   ChangeDetectionStrategy,
@@ -82,7 +83,6 @@ export const MAT_DATEPICKER_SCROLL_STRATEGY_PROVIDER = {
   host: {
     'class': 'mat-datepicker-content',
     '[class.mat-datepicker-content-touch]': 'datepicker.touchUi',
-    '(keydown)': '_handleKeydown($event)',
   },
   exportAs: 'matDatepickerContent',
   encapsulation: ViewEncapsulation.None,
@@ -97,18 +97,6 @@ export class MatDatepickerContent<D> implements AfterContentInit {
   ngAfterContentInit() {
     this._calendar._focusActiveCell();
   }
-
-  /**
-   * Handles keydown event on datepicker content.
-   * @param event The event.
-   */
-  _handleKeydown(event: KeyboardEvent): void {
-    if (event.keyCode === ESCAPE) {
-      this.datepicker.close();
-      event.preventDefault();
-      event.stopPropagation();
-    }
-  }
 }
 
 
@@ -368,6 +356,10 @@ export class MatDatepicker<D> implements OnDestroy {
     });
 
     this._popupRef = this._overlay.create(overlayConfig);
+
+    this._popupRef._keydownEvents
+      .pipe(filter(event => event.keyCode === ESCAPE))
+      .subscribe(() => this.close());
   }
 
   /** Create the popup PositionStrategy. */