Revert "perf(cdk/overlay): add event listeners for overlay dispatchers outside of zone (#23962)" (#24353)

This reverts commit e761455.

Author: zarend

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

@@ -1,13 +1,12 @@
 import {TestBed, inject} from '@angular/core/testing';
 import {dispatchKeyboardEvent} from '../../testing/private';
 import {ESCAPE} from '@angular/cdk/keycodes';
-import {ApplicationRef, Component} from '@angular/core';
+import {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;
 
@@ -17,14 +16,10 @@ describe('OverlayKeyboardDispatcher', () => {
       declarations: [TestComponent],
     });
 
-    inject(
-      [ApplicationRef, OverlayKeyboardDispatcher, Overlay],
-      (ar: ApplicationRef, kbd: OverlayKeyboardDispatcher, o: Overlay) => {
-        appRef = ar;
-        keyboardDispatcher = kbd;
-        overlay = o;
-      },
-    )();
+    inject([OverlayKeyboardDispatcher, Overlay], (kbd: OverlayKeyboardDispatcher, o: Overlay) => {
+      keyboardDispatcher = kbd;
+      overlay = o;
+    })();
   });
 
   it('should track overlays in order as they are attached and detached', () => {
@@ -184,21 +179,6 @@ 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, NgZone, Optional} from '@angular/core';
+import {Inject, Injectable} from '@angular/core';
 import {OverlayReference} from '../overlay-reference';
 import {BaseOverlayDispatcher} from './base-overlay-dispatcher';
 
@@ -18,11 +18,7 @@ import {BaseOverlayDispatcher} from './base-overlay-dispatcher';
  */
 @Injectable({providedIn: 'root'})
 export class OverlayKeyboardDispatcher extends BaseOverlayDispatcher {
-  constructor(
-    @Inject(DOCUMENT) document: any,
-    /** @breaking-change 14.0.0 _ngZone will be required. */
-    @Optional() private _ngZone?: NgZone,
-  ) {
+  constructor(@Inject(DOCUMENT) document: any) {
     super(document);
   }
 
@@ -32,14 +28,7 @@ export class OverlayKeyboardDispatcher extends BaseOverlayDispatcher {
 
     // Lazily start dispatcher once first overlay is added
     if (!this._isAttached) {
-      /** @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._document.body.addEventListener('keydown', this._keydownListener);
       this._isAttached = true;
     }
   }
@@ -64,13 +53,7 @@ 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) {
-        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);
-        }
+        overlays[i]._keydownEvents.next(event);
         break;
       }
     }

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

@@ -1,12 +1,11 @@
 import {TestBed, inject, fakeAsync} from '@angular/core/testing';
-import {ApplicationRef, Component} from '@angular/core';
+import {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;
 
@@ -17,9 +16,8 @@ describe('OverlayOutsideClickDispatcher', () => {
     });
 
     inject(
-      [ApplicationRef, OverlayOutsideClickDispatcher, Overlay],
-      (ar: ApplicationRef, ocd: OverlayOutsideClickDispatcher, o: Overlay) => {
-        appRef = ar;
+      [OverlayOutsideClickDispatcher, Overlay],
+      (ocd: OverlayOutsideClickDispatcher, o: Overlay) => {
         outsideClickDispatcher = ocd;
         overlay = o;
       },
@@ -338,70 +336,6 @@ 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, NgZone, Optional} from '@angular/core';
+import {Inject, Injectable} from '@angular/core';
 import {OverlayReference} from '../overlay-reference';
 import {Platform, _getEventTarget} from '@angular/cdk/platform';
 import {BaseOverlayDispatcher} from './base-overlay-dispatcher';
@@ -23,12 +23,7 @@ export class OverlayOutsideClickDispatcher extends BaseOverlayDispatcher {
   private _cursorStyleIsSet = false;
   private _pointerDownEventTarget: EventTarget | null;
 
-  constructor(
-    @Inject(DOCUMENT) document: any,
-    private _platform: Platform,
-    /** @breaking-change 14.0.0 _ngZone will be required. */
-    @Optional() private _ngZone?: NgZone,
-  ) {
+  constructor(@Inject(DOCUMENT) document: any, private _platform: Platform) {
     super(document);
   }
 
@@ -44,13 +39,10 @@ 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;
-
-      /** @breaking-change 14.0.0 _ngZone will be required. */
-      if (this._ngZone) {
-        this._ngZone.runOutsideAngular(() => this._addEventListeners(body));
-      } else {
-        this._addEventListeners(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);
 
       // click event is not fired on iOS. To make element "clickable" we are
       // setting the cursor to pointer
@@ -80,13 +72,6 @@ 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);
@@ -134,13 +119,7 @@ export class OverlayOutsideClickDispatcher extends BaseOverlayDispatcher {
         break;
       }
 
-      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);
-      }
+      overlayRef._outsidePointerEvents.next(event);
     }
   };
 }

tools/public_api_guard/cdk/overlay.md

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