refactor(overlay): use key event dispatcher for CdkConnectedOverlay

Switched the `CdkConnectedOverlay` directive to use the key event dispatcher rather than listening to events on the document.

Author: crisbeto

src/cdk/overlay/overlay-directives.spec.ts

@@ -110,7 +110,7 @@ describe('Overlay directives', () => {
     fixture.componentInstance.isOpen = true;
     fixture.detectChanges();
 
-    dispatchKeyboardEvent(document, 'keydown', ESCAPE);
+    dispatchKeyboardEvent(document.body, 'keydown', ESCAPE);
     fixture.detectChanges();
 
     expect(overlayContainerElement.textContent!.trim()).toBe('',
@@ -342,4 +342,3 @@ class ConnectedOverlayPropertyInitOrder {
   @ViewChild(CdkConnectedOverlay) connectedOverlayDirective: CdkConnectedOverlay;
   @ViewChild('trigger') trigger: CdkOverlayOrigin;
 }
-

src/cdk/overlay/overlay-directives.ts

@@ -330,11 +330,16 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges {
   private _attachOverlay() {
     if (!this._overlayRef) {
       this._createOverlay();
+
+      this._overlayRef!.keydownEvents().subscribe((event: KeyboardEvent) => {
+        if (event.keyCode === ESCAPE) {
+          this._detachOverlay();
+        }
+      });
     }
 
     this._position.withDirection(this.dir);
     this._overlayRef.setDirection(this.dir);
-    this._document.addEventListener('keydown', this._escapeListener);
 
     if (!this._overlayRef.hasAttached()) {
       this._overlayRef.attach(this._templatePortal);
@@ -356,7 +361,6 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges {
     }
 
     this._backdropSubscription.unsubscribe();
-    this._document.removeEventListener('keydown', this._escapeListener);
   }
 
   /** Destroys the overlay created by this directive. */
@@ -367,13 +371,5 @@ export class CdkConnectedOverlay implements OnDestroy, OnChanges {
 
     this._backdropSubscription.unsubscribe();
     this._positionSubscription.unsubscribe();
-    this._document.removeEventListener('keydown', this._escapeListener);
-  }
-
-  /** Event listener that will close the overlay when the user presses escape. */
-  private _escapeListener = (event: KeyboardEvent) => {
-    if (event.keyCode === ESCAPE) {
-      this._detachOverlay();
-    }
   }
 }