fix(overlay): OverlayKeyboardDispatcher not removing global event lis…

…tener (#10160)

Fixes the `OverlayKeyboardDispatcher` not removing the global event listener, even though the subscription gets removed correctly. The issue seems to come from the fact that rxjs attaches the event using `useCapture = true`, however it doesn't pass the `useCapture` parameter when unsubscribing, which leaves listener in place. These changes switch to using `addEventListener` and `removeEventListener` to manage the event.

Fixes #10143.

src/cdk/overlay/keyboard/overlay-keyboard-dispatcher.spec.ts

@@ -151,6 +151,20 @@ describe('OverlayKeyboardDispatcher', () => {
  expect(spy).toHaveBeenCalledTimes(1);
  });
 
+ it('should dispose of the global keyboard event handler correctly', () => {
+ const overlayRef = overlay.create();
+ const body = document.body;
+
+ spyOn(body, 'addEventListener');
+ spyOn(body, 'removeEventListener');
+
+ keyboardDispatcher.add(overlayRef);
+ expect(body.addEventListener).toHaveBeenCalledWith('keydown', jasmine.any(Function), true);
+
+ overlayRef.dispose();
+ expect(body.removeEventListener).toHaveBeenCalledWith('keydown', jasmine.any(Function), true);
+ });
+
 });
 
 

src/cdk/overlay/keyboard/overlay-keyboard-dispatcher.ts

@@ -8,9 +8,6 @@
 
 import {Injectable, Inject, InjectionToken, Optional, SkipSelf, OnDestroy} from '@angular/core';
 import {OverlayRef} from '../overlay-ref';
-import {Subscription} from 'rxjs/Subscription';
-import {filter} from 'rxjs/operators/filter';
-import {fromEvent} from 'rxjs/observable/fromEvent';
 import {DOCUMENT} from '@angular/common';
 
 /**
@@ -24,19 +21,23 @@ export class OverlayKeyboardDispatcher implements OnDestroy {
  /** Currently attached overlays in the order they were attached. */
  _attachedOverlays: OverlayRef[] = [];
 
- private _keydownEventSubscription: Subscription | null;
+ private _document: Document;
+ private _isAttached: boolean;
 
- constructor(@Inject(DOCUMENT) private _document: any) {}
+ constructor(@Inject(DOCUMENT) document: any) {
+ this._document = document;
+ }
 
  ngOnDestroy() {
- this._unsubscribeFromKeydownEvents();
+ this._detach();
  }
 
  /** Add a new overlay to the list of attached overlay refs. */
  add(overlayRef: OverlayRef): void {
  // Lazily start dispatcher once first overlay is added
- if (!this._keydownEventSubscription) {
- this._subscribeToKeydownEvents();
+ if (!this._isAttached) {
+ this._document.body.addEventListener('keydown', this._keydownListener, true);
+ this._isAttached = true;
  }
 
  this._attachedOverlays.push(overlayRef);
@@ -52,30 +53,7 @@ export class OverlayKeyboardDispatcher implements OnDestroy {
 
  // Remove the global listener once there are no more overlays.
  if (this._attachedOverlays.length === 0) {
- this._unsubscribeFromKeydownEvents();
- }
- }
-
- /**
- * Subscribe to keydown events that land on the body and dispatch those
- * events to the appropriate overlay.
- */
- private _subscribeToKeydownEvents(): void {
- const bodyKeydownEvents = fromEvent<KeyboardEvent>(this._document.body, 'keydown', true);
-
- this._keydownEventSubscription = bodyKeydownEvents.pipe(
- filter(() => !!this._attachedOverlays.length)
- ).subscribe(event => {
- // Dispatch keydown event to the correct overlay.
- this._selectOverlayFromEvent(event)._keydownEvents.next(event);
- });
- }
-
- /** Removes the global keydown subscription. */
- private _unsubscribeFromKeydownEvents(): void {
- if (this._keydownEventSubscription) {
- this._keydownEventSubscription.unsubscribe();
- this._keydownEventSubscription = null;
+ this._detach();
  }
  }
 
@@ -91,6 +69,21 @@ export class OverlayKeyboardDispatcher implements OnDestroy {
  return targetedOverlay || this._attachedOverlays[this._attachedOverlays.length - 1];
  }
 
+ /** Detaches the global keyboard event listener. */
+ private _detach() {
+ if (this._isAttached) {
+ this._document.body.removeEventListener('keydown', this._keydownListener, true);
+ this._isAttached = false;
+ }
+ }
+
+ /** Keyboard event listener that will be attached to the body. */
+ private _keydownListener = (event: KeyboardEvent) => {
+ if (this._attachedOverlays.length) {
+ // Dispatch keydown event to the correct overlay.
+ this._selectOverlayFromEvent(event)._keydownEvents.next(event);
+ }
+ }
 }
 
 /** @docs-private */