diff --git a/src/cdk/overlay/dispatchers/overlay-keyboard-dispatcher.spec.ts b/src/cdk/overlay/dispatchers/overlay-keyboard-dispatcher.spec.ts index b5423cdf7af0..0fca4875aca5 100644 --- a/src/cdk/overlay/dispatchers/overlay-keyboard-dispatcher.spec.ts +++ b/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({ diff --git a/src/cdk/overlay/dispatchers/overlay-keyboard-dispatcher.ts b/src/cdk/overlay/dispatchers/overlay-keyboard-dispatcher.ts index bc3a528f82cf..884eac733f81 100644 --- a/src/cdk/overlay/dispatchers/overlay-keyboard-dispatcher.ts +++ b/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; } } diff --git a/src/cdk/overlay/dispatchers/overlay-outside-click-dispatcher.spec.ts b/src/cdk/overlay/dispatchers/overlay-outside-click-dispatcher.spec.ts index ff2f6a294a68..a10df92140a7 100644 --- a/src/cdk/overlay/dispatchers/overlay-outside-click-dispatcher.spec.ts +++ b/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({ diff --git a/src/cdk/overlay/dispatchers/overlay-outside-click-dispatcher.ts b/src/cdk/overlay/dispatchers/overlay-outside-click-dispatcher.ts index a70512502457..ae57b23a5885 100644 --- a/src/cdk/overlay/dispatchers/overlay-outside-click-dispatcher.ts +++ b/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); } }; } diff --git a/tools/public_api_guard/cdk/overlay.md b/tools/public_api_guard/cdk/overlay.md index 08231c916901..79adbbb8d438 100644 --- a/tools/public_api_guard/cdk/overlay.md +++ b/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; + static ɵfac: i0.ɵɵFactoryDeclaration; // (undocumented) static ɵprov: i0.ɵɵInjectableDeclaration; } @@ -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; + static ɵfac: i0.ɵɵFactoryDeclaration; // (undocumented) static ɵprov: i0.ɵɵInjectableDeclaration; }