perf(cdk/overlay): add event listeners for overlay dispatchers outside of zone (#24408)

Author: arturovt

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

@@ -1,12 +1,13 @@
 import {TestBed, inject} from '@angular/core/testing';
 import {dispatchKeyboardEvent} from '../../testing/private';
 import {ESCAPE} from '@angular/cdk/keycodes';
-import {Component} from '@angular/core';
+import {ApplicationRef, Component} from '@angular/core';
 import {OverlayModule, Overlay} from '../index';
 import {OverlayKeyboardDispatcher} from './overlay-keyboard-dispatcher';
 import {ComponentPortal} from '@angular/cdk/portal';
 
 describe('OverlayKeyboardDispatcher', () => {
+  let appRef: ApplicationRef;
   let keyboardDispatcher: OverlayKeyboardDispatcher;
   let overlay: Overlay;
 
@@ -16,10 +17,14 @@ describe('OverlayKeyboardDispatcher', () => {
       declarations: [TestComponent],
     });
 
-    inject([OverlayKeyboardDispatcher, Overlay], (kbd: OverlayKeyboardDispatcher, o: Overlay) => {
-      keyboardDispatcher = kbd;
-      overlay = o;
-    })();
+    inject(
+      [ApplicationRef, OverlayKeyboardDispatcher, Overlay],
+      (ar: ApplicationRef, kbd: OverlayKeyboardDispatcher, o: Overlay) => {
+        appRef = ar;
+        keyboardDispatcher = kbd;
+        overlay = o;
+      },
+    )();
   });
 
   it('should track overlays in order as they are attached and detached', () => {
@@ -179,6 +184,21 @@ describe('OverlayKeyboardDispatcher', () => {
     expect(overlayTwoSpy).not.toHaveBeenCalled();
     expect(overlayOneSpy).toHaveBeenCalled();
   });
+
+  it('should not run change detection if there are no `keydownEvents` observers', () => {
+    spyOn(appRef, 'tick');
+    const overlayRef = overlay.create();
+    keyboardDispatcher.add(overlayRef);
+
+    expect(appRef.tick).toHaveBeenCalledTimes(0);
+    dispatchKeyboardEvent(document.body, 'keydown', ESCAPE);
+    expect(appRef.tick).toHaveBeenCalledTimes(0);
+
+    overlayRef.keydownEvents().subscribe();
+    dispatchKeyboardEvent(document.body, 'keydown', ESCAPE);
+
+    expect(appRef.tick).toHaveBeenCalledTimes(1);
+  });
 });
 
 @Component({

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

@@ -7,7 +7,7 @@
  */
 
 import {DOCUMENT} from '@angular/common';
-import {Inject, Injectable} from '@angular/core';
+import {Inject, Injectable, NgZone, Optional} from '@angular/core';
 import {OverlayReference} from '../overlay-reference';
 import {BaseOverlayDispatcher} from './base-overlay-dispatcher';
 
@@ -18,7 +18,11 @@ import {BaseOverlayDispatcher} from './base-overlay-dispatcher';
  */
 @Injectable({providedIn: 'root'})
 export class OverlayKeyboardDispatcher extends BaseOverlayDispatcher {
-  constructor(@Inject(DOCUMENT) document: any) {
+  constructor(
+    @Inject(DOCUMENT) document: any,
+    /** @breaking-change 14.0.0 _ngZone will be required. */
+    @Optional() private _ngZone?: NgZone,
+  ) {
     super(document);
   }
 
@@ -28,7 +32,14 @@ export class OverlayKeyboardDispatcher extends BaseOverlayDispatcher {
 
     // Lazily start dispatcher once first overlay is added
     if (!this._isAttached) {
-      this._document.body.addEventListener('keydown', this._keydownListener);
+      /** @breaking-change 14.0.0 _ngZone will be required. */
+      if (this._ngZone) {
+        this._ngZone.runOutsideAngular(() =>
+          this._document.body.addEventListener('keydown', this._keydownListener),
+        );
+      } else {
+        this._document.body.addEventListener('keydown', this._keydownListener);
+      }
       this._isAttached = true;
     }
   }
@@ -53,7 +64,13 @@ export class OverlayKeyboardDispatcher extends BaseOverlayDispatcher {
       // because we don't want overlays that don't handle keyboard events to block the ones below
       // them that do.
       if (overlays[i]._keydownEvents.observers.length > 0) {
-        overlays[i]._keydownEvents.next(event);
+        const keydownEvents = overlays[i]._keydownEvents;
+        /** @breaking-change 14.0.0 _ngZone will be required. */
+        if (this._ngZone) {
+          this._ngZone.run(() => keydownEvents.next(event));
+        } else {
+          keydownEvents.next(event);
+        }
         break;
       }
     }

src/cdk/overlay/dispatchers/overlay-outside-click-dispatcher.spec.ts

@@ -1,11 +1,12 @@
 import {TestBed, inject, fakeAsync} from '@angular/core/testing';
-import {Component} from '@angular/core';
+import {ApplicationRef, Component} from '@angular/core';
 import {dispatchFakeEvent, dispatchMouseEvent} from '../../testing/private';
 import {OverlayModule, Overlay} from '../index';
 import {OverlayOutsideClickDispatcher} from './overlay-outside-click-dispatcher';
 import {ComponentPortal} from '@angular/cdk/portal';
 
 describe('OverlayOutsideClickDispatcher', () => {
+  let appRef: ApplicationRef;
   let outsideClickDispatcher: OverlayOutsideClickDispatcher;
   let overlay: Overlay;
 
@@ -16,8 +17,9 @@ describe('OverlayOutsideClickDispatcher', () => {
     });
 
     inject(
-      [OverlayOutsideClickDispatcher, Overlay],
-      (ocd: OverlayOutsideClickDispatcher, o: Overlay) => {
+      [ApplicationRef, OverlayOutsideClickDispatcher, Overlay],
+      (ar: ApplicationRef, ocd: OverlayOutsideClickDispatcher, o: Overlay) => {
+        appRef = ar;
         outsideClickDispatcher = ocd;
         overlay = o;
       },
@@ -336,6 +338,70 @@ describe('OverlayOutsideClickDispatcher', () => {
       thirdOverlayRef.dispose();
     }),
   );
+
+  describe('change detection behavior', () => {
+    it('should not run change detection if there is no portal attached to the overlay', () => {
+      spyOn(appRef, 'tick');
+      const overlayRef = overlay.create();
+      outsideClickDispatcher.add(overlayRef);
+
+      const context = document.createElement('div');
+      document.body.appendChild(context);
+
+      overlayRef.outsidePointerEvents().subscribe();
+      dispatchMouseEvent(context, 'click');
+
+      expect(appRef.tick).toHaveBeenCalledTimes(0);
+    });
+
+    it('should not run change detection if the click was made outside the overlay but there are no `outsidePointerEvents` observers', () => {
+      spyOn(appRef, 'tick');
+      const portal = new ComponentPortal(TestComponent);
+      const overlayRef = overlay.create();
+      overlayRef.attach(portal);
+      outsideClickDispatcher.add(overlayRef);
+
+      const context = document.createElement('div');
+      document.body.appendChild(context);
+
+      dispatchMouseEvent(context, 'click');
+
+      expect(appRef.tick).toHaveBeenCalledTimes(0);
+    });
+
+    it('should not run change detection if the click was made inside the overlay and there are `outsidePointerEvents` observers', () => {
+      spyOn(appRef, 'tick');
+      const portal = new ComponentPortal(TestComponent);
+      const overlayRef = overlay.create();
+      overlayRef.attach(portal);
+      outsideClickDispatcher.add(overlayRef);
+
+      overlayRef.outsidePointerEvents().subscribe();
+      dispatchMouseEvent(overlayRef.overlayElement, 'click');
+
+      expect(appRef.tick).toHaveBeenCalledTimes(0);
+    });
+
+    it('should run change detection if the click was made outside the overlay and there are `outsidePointerEvents` observers', () => {
+      spyOn(appRef, 'tick');
+      const portal = new ComponentPortal(TestComponent);
+      const overlayRef = overlay.create();
+      overlayRef.attach(portal);
+      outsideClickDispatcher.add(overlayRef);
+
+      const context = document.createElement('div');
+      document.body.appendChild(context);
+
+      expect(appRef.tick).toHaveBeenCalledTimes(0);
+      dispatchMouseEvent(context, 'click');
+      expect(appRef.tick).toHaveBeenCalledTimes(0);
+
+      overlayRef.outsidePointerEvents().subscribe();
+
+      dispatchMouseEvent(context, 'click');
+      expect(appRef.tick).toHaveBeenCalledTimes(1);
+    });
+  });
 });
 
 @Component({

src/cdk/overlay/dispatchers/overlay-outside-click-dispatcher.ts

@@ -7,7 +7,7 @@
  */
 
 import {DOCUMENT} from '@angular/common';
-import {Inject, Injectable} from '@angular/core';
+import {Inject, Injectable, NgZone, Optional} from '@angular/core';
 import {OverlayReference} from '../overlay-reference';
 import {Platform, _getEventTarget} from '@angular/cdk/platform';
 import {BaseOverlayDispatcher} from './base-overlay-dispatcher';
@@ -23,7 +23,12 @@ export class OverlayOutsideClickDispatcher extends BaseOverlayDispatcher {
   private _cursorStyleIsSet = false;
   private _pointerDownEventTarget: EventTarget | null;
 
-  constructor(@Inject(DOCUMENT) document: any, private _platform: Platform) {
+  constructor(
+    @Inject(DOCUMENT) document: any,
+    private _platform: Platform,
+    /** @breaking-change 14.0.0 _ngZone will be required. */
+    @Optional() private _ngZone?: NgZone,
+  ) {
     super(document);
   }
 
@@ -39,10 +44,13 @@ export class OverlayOutsideClickDispatcher extends BaseOverlayDispatcher {
     // https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html
     if (!this._isAttached) {
       const body = this._document.body;
-      body.addEventListener('pointerdown', this._pointerDownListener, true);
-      body.addEventListener('click', this._clickListener, true);
-      body.addEventListener('auxclick', this._clickListener, true);
-      body.addEventListener('contextmenu', this._clickListener, true);
+
+      /** @breaking-change 14.0.0 _ngZone will be required. */
+      if (this._ngZone) {
+        this._ngZone.runOutsideAngular(() => this._addEventListeners(body));
+      } else {
+        this._addEventListeners(body);
+      }
 
       // click event is not fired on iOS. To make element "clickable" we are
       // setting the cursor to pointer
@@ -72,6 +80,13 @@ export class OverlayOutsideClickDispatcher extends BaseOverlayDispatcher {
     }
   }
 
+  private _addEventListeners(body: HTMLElement): void {
+    body.addEventListener('pointerdown', this._pointerDownListener, true);
+    body.addEventListener('click', this._clickListener, true);
+    body.addEventListener('auxclick', this._clickListener, true);
+    body.addEventListener('contextmenu', this._clickListener, true);
+  }
+
   /** Store pointerdown event target to track origin of click. */
   private _pointerDownListener = (event: PointerEvent) => {
     this._pointerDownEventTarget = _getEventTarget(event);
@@ -119,7 +134,13 @@ export class OverlayOutsideClickDispatcher extends BaseOverlayDispatcher {
         break;
       }
 
-      overlayRef._outsidePointerEvents.next(event);
+      const outsidePointerEvents = overlayRef._outsidePointerEvents;
+      /** @breaking-change 14.0.0 _ngZone will be required. */
+      if (this._ngZone) {
+        this._ngZone.run(() => outsidePointerEvents.next(event));
+      } else {
+        outsidePointerEvents.next(event);
+      }
     }
   };
 }

tools/public_api_guard/cdk/overlay.md

@@ -317,11 +317,12 @@ export class OverlayContainer implements OnDestroy {
 
 // @public
 export class OverlayKeyboardDispatcher extends BaseOverlayDispatcher {
-    constructor(document: any);
+    constructor(document: any,
+    _ngZone?: NgZone | undefined);
     add(overlayRef: OverlayReference): void;
     protected detach(): void;
     // (undocumented)
-    static ɵfac: i0.ɵɵFactoryDeclaration<OverlayKeyboardDispatcher, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<OverlayKeyboardDispatcher, [null, { optional: true; }]>;
     // (undocumented)
     static ɵprov: i0.ɵɵInjectableDeclaration<OverlayKeyboardDispatcher>;
 }
@@ -338,11 +339,12 @@ export class OverlayModule {
 
 // @public
 export class OverlayOutsideClickDispatcher extends BaseOverlayDispatcher {
-    constructor(document: any, _platform: Platform);
+    constructor(document: any, _platform: Platform,
+    _ngZone?: NgZone | undefined);
     add(overlayRef: OverlayReference): void;
     protected detach(): void;
     // (undocumented)
-    static ɵfac: i0.ɵɵFactoryDeclaration<OverlayOutsideClickDispatcher, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<OverlayOutsideClickDispatcher, [null, null, { optional: true; }]>;
     // (undocumented)
     static ɵprov: i0.ɵɵInjectableDeclaration<OverlayOutsideClickDispatcher>;
 }