From f824928aa915df5afe5019c48e487a94f04fde38 Mon Sep 17 00:00:00 2001 From: Andy Chrzaszcz Date: Tue, 7 Jul 2020 12:30:55 -0400 Subject: [PATCH] refactor(cdk/overlay): remove logic which tracks excluded elements from outside clicks This removes the ability to track excluded elements from the overlay and only stops outside click event notifications if the click event occurred within an overlay element itself. The overlay should not track elements to be excluded from outside click - this should be up to the developer. This allows for custom closeout logic to be implemented by the developer leaving the cdk to be unopinionated. --- .../overlay-outside-click-dispatcher.spec.ts | 32 ++++++++++++------- .../overlay-outside-click-dispatcher.ts | 10 ++---- src/cdk/overlay/overlay-config.ts | 5 --- tools/public_api_guard/cdk/overlay.d.ts | 1 - 4 files changed, 23 insertions(+), 25 deletions(-) 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 989fd0d7a93f..4696765721b6 100644 --- a/src/cdk/overlay/dispatchers/overlay-outside-click-dispatcher.spec.ts +++ b/src/cdk/overlay/dispatchers/overlay-outside-click-dispatcher.spec.ts @@ -125,26 +125,34 @@ describe('OverlayOutsideClickDispatcher', () => { overlayTwo.dispose(); }); - it(`should not dispatch click event when click on element - included in excludeFromOutsideClick array`, () => { + it('should dispatch the click event when click is on an element outside the overlay', () => { + const portal = new ComponentPortal(TestComponent); const overlayRef = overlay.create(); - const spy = jasmine.createSpy('overlay mouse click event spy'); + overlayRef.attach(portal); + const button = document.createElement('button'); + document.body.appendChild(button); + + const spy = jasmine.createSpy('overlay mouse click spy'); overlayRef.outsidePointerEvents().subscribe(spy); - const overlayConfig = overlayRef.getConfig(); - expect(overlayConfig.excludeFromOutsideClick).toBeDefined(); - expect(overlayConfig.excludeFromOutsideClick!.length).toBe(0); + button.click(); + expect(spy).toHaveBeenCalled(); - overlayRef.attach(new ComponentPortal(TestComponent)); + button.parentNode!.removeChild(button); + overlayRef.dispose(); + }); + + it('should not dispatch the click event when click is on an element inside the overlay', () => { + const portal = new ComponentPortal(TestComponent); + const overlayRef = overlay.create(); + overlayRef.attach(portal); - const buttonShouldNotDetach = document.createElement('button'); - document.body.appendChild(buttonShouldNotDetach); - overlayConfig.excludeFromOutsideClick!.push(buttonShouldNotDetach); - buttonShouldNotDetach.click(); + const spy = jasmine.createSpy('overlay mouse click event spy'); + overlayRef.outsidePointerEvents().subscribe(spy); + overlayRef.overlayElement.click(); expect(spy).not.toHaveBeenCalled(); - buttonShouldNotDetach.parentNode!.removeChild(buttonShouldNotDetach); overlayRef.dispose(); }); }); diff --git a/src/cdk/overlay/dispatchers/overlay-outside-click-dispatcher.ts b/src/cdk/overlay/dispatchers/overlay-outside-click-dispatcher.ts index c7f7f0ee30c6..4e899d58b8db 100644 --- a/src/cdk/overlay/dispatchers/overlay-outside-click-dispatcher.ts +++ b/src/cdk/overlay/dispatchers/overlay-outside-click-dispatcher.ts @@ -81,13 +81,9 @@ export class OverlayOutsideClickDispatcher extends BaseOverlayDispatcher { continue; } - const config = overlayRef.getConfig(); - const excludeElements = [...config.excludeFromOutsideClick!, overlayRef.overlayElement]; - const isInsideClick: boolean = excludeElements.some(e => e.contains(target)); - - // If it is inside click just break - we should do nothing - // If it is outside click dispatch the mouse event, and proceed with the next overlay - if (isInsideClick) { + // If it's a click inside the overlay, just break - we should do nothing + // If it's an outside click dispatch the mouse event, and proceed with the next overlay + if (overlayRef.overlayElement.contains(target as Node)) { break; } diff --git a/src/cdk/overlay/overlay-config.ts b/src/cdk/overlay/overlay-config.ts index 3d7e0ac1502e..f665e2164921 100644 --- a/src/cdk/overlay/overlay-config.ts +++ b/src/cdk/overlay/overlay-config.ts @@ -59,11 +59,6 @@ export class OverlayConfig { */ disposeOnNavigation?: boolean = false; - /** - * Array of HTML elements clicking on which should not be considered as outside click - */ - excludeFromOutsideClick?: HTMLElement[] = []; - constructor(config?: OverlayConfig) { if (config) { // Use `Iterable` instead of `Array` because TypeScript, as of 3.6.3, diff --git a/tools/public_api_guard/cdk/overlay.d.ts b/tools/public_api_guard/cdk/overlay.d.ts index 3438afbc8b0f..df7746f69110 100644 --- a/tools/public_api_guard/cdk/overlay.d.ts +++ b/tools/public_api_guard/cdk/overlay.d.ts @@ -205,7 +205,6 @@ export declare class OverlayConfig { backdropClass?: string | string[]; direction?: Direction | Directionality; disposeOnNavigation?: boolean; - excludeFromOutsideClick?: HTMLElement[]; hasBackdrop?: boolean; height?: number | string; maxHeight?: number | string;