refactor(dialog): switch to common keyboard handling and move keyboard logic into individual dialog (#9078)

* Refactors the dialogs to use the common keyboard provider, rather than binding to the document.
* Moves the responsibility for handling the keyboard events from the dialog provider to the individual dialogs.

Author: crisbeto

src/lib/dialog/dialog-ref.ts

@@ -7,6 +7,7 @@
  */
 
 import {OverlayRef, GlobalPositionStrategy} from '@angular/cdk/overlay';
+import {ESCAPE} from '@angular/cdk/keycodes';
 import {filter} from 'rxjs/operators/filter';
 import {take} from 'rxjs/operators/take';
 import {DialogPosition} from './dialog-config';
@@ -68,6 +69,10 @@ export class MatDialogRef<T, R = any> {
       this._afterClosed.complete();
       this.componentInstance = null!;
     });
+
+    _overlayRef.keydownEvents()
+      .pipe(filter(event => event.keyCode === ESCAPE && !this.disableClose))
+      .subscribe(() => this.close());
   }
 
   /**

src/lib/dialog/dialog.ts

@@ -7,7 +7,6 @@
  */
 
 import {Directionality} from '@angular/cdk/bidi';
-import {ESCAPE} from '@angular/cdk/keycodes';
 import {
   BlockScrollStrategy,
   Overlay,
@@ -30,7 +29,6 @@ import {
 import {Observable} from 'rxjs/Observable';
 import {defer} from 'rxjs/observable/defer';
 import {of as observableOf} from 'rxjs/observable/of';
-import {filter} from 'rxjs/operators/filter';
 import {startWith} from 'rxjs/operators/startWith';
 import {Subject} from 'rxjs/Subject';
 import {MatDialogConfig} from './dialog-config';
@@ -238,11 +236,6 @@ export class MatDialog {
       });
     }
 
-    // Close when escape keydown event occurs
-    overlayRef.keydownEvents().pipe(
-      filter(event => event.keyCode === ESCAPE && !dialogRef.disableClose)
-    ).subscribe(() => dialogRef.close());
-
     if (componentOrTemplateRef instanceof TemplateRef) {
       dialogContainer.attachTemplatePortal(
         new TemplatePortal<T>(componentOrTemplateRef, null!,

src/material-experimental/dialog/dialog-ref.ts

@@ -8,8 +8,10 @@
 
 
 import {OverlayRef, GlobalPositionStrategy, OverlaySizeConfig} from '@angular/cdk/overlay';
+import {ESCAPE} from '@angular/cdk/keycodes';
 import {Observable} from 'rxjs/Observable';
 import {map} from 'rxjs/operators/map';
+import {filter} from 'rxjs/operators/filter';
 import {DialogPosition} from './dialog-config';
 import {CdkDialogContainer} from './dialog-container';
 
@@ -52,6 +54,11 @@ export class DialogRef<T, R = any> {
       this._overlayRef.dispose();
       this.componentInstance = null!;
     });
+
+    // Close when escape keydown event occurs
+    _overlayRef.keydownEvents()
+      .pipe(filter(event => event.keyCode === ESCAPE && !this.disableClose))
+      .subscribe(() => this.close());
   }
 
   /** Gets an observable that emits when the overlay's backdrop has been clicked. */

src/material-experimental/dialog/dialog.ts

@@ -15,7 +15,6 @@ import {
   ComponentRef
 } from '@angular/core';
 import {ComponentPortal, PortalInjector, TemplatePortal} from '@angular/cdk/portal';
-import {ESCAPE} from '@angular/cdk/keycodes';
 import {Observable} from 'rxjs/Observable';
 import {Subject} from 'rxjs/Subject';
 import {DialogRef} from './dialog-ref';
@@ -46,9 +45,6 @@ import {
  * Service to open modal dialogs.
  */
 export class Dialog {
-  /** A the handleKeydown method bound to the class instance.  */
-  private _boundKeydown = this._handleKeydown.bind(this);
-
   /** Stream that emits when all dialogs are closed. */
   get _afterAllClosed(): Observable<void> {
     return this._parentDialog ? this._parentDialog.afterAllClosed : this._afterAllClosedBase;
@@ -83,10 +79,6 @@ export class Dialog {
     if (!_parentDialog && location) {
       location.subscribe(() => this.closeAll());
     }
-
-    this.afterAllClosed.subscribe(() => {
-      document.removeEventListener('keydown', this._boundKeydown);
-    });
   }
 
   /** Gets an open dialog by id. */
@@ -134,18 +126,16 @@ export class Dialog {
   }
 
   /**
-   * Registers a keydown listener, and forwards emitting events for when dialogs are opened and all
-   * dialogs are closed.
+   * Forwards emitting events for when dialogs are opened and all dialogs are closed.
    */
   private registerDialogRef(dialogRef: DialogRef<any>): void {
-    if (!this.openDialogs.length) {
-      document.addEventListener('keydown', this._boundKeydown);
-    }
     this.openDialogs.push(dialogRef);
+
     let dialogOpenSub = dialogRef.afterOpen().subscribe(() => {
       this.afterOpen.next(dialogRef);
       dialogOpenSub.unsubscribe();
     });
+
     let dialogCloseSub = dialogRef.afterClosed().subscribe(() => {
       let dialogIdx = this._openDialogs.indexOf(dialogRef);
       if (dialogIdx !== -1) { this._openDialogs.splice(dialogIdx, 1); }
@@ -157,20 +147,6 @@ export class Dialog {
     });
   }
 
-  /**
-   * Handles global key presses while there are open dialogs. Closes the
-   * top dialog when the user presses escape.
-   */
-  private _handleKeydown(event: KeyboardEvent): void {
-    const topDialog = this.openDialogs[this.openDialogs.length - 1];
-    const canClose = topDialog ? !topDialog.disableClose : false;
-
-    if (event.keyCode === ESCAPE && canClose) {
-      topDialog.close();
-    }
-  }
-
-
   /**
    * Creates an overlay config from a dialog config.
    * @param config The dialog configuration.