Merge pull request #8652 from IgniteUI/mvenkov/close-overlay-in-shadow-dom-9.2

Close on outside click when in shadow DOM - 9.1

Author: Lipata

projects/igniteui-angular/src/lib/services/overlay/overlay.spec.ts

@@ -6,7 +6,8 @@ import {
     ViewChild,
     HostBinding,
     ApplicationRef,
-    ComponentRef
+    ComponentRef,
+    ViewEncapsulation
 } from '@angular/core';
 import { TestBed, fakeAsync, tick, async, inject } from '@angular/core/testing';
 import { BrowserModule } from '@angular/platform-browser';
@@ -177,9 +178,9 @@ function formatString(inputString: string, formatters: any[]) {
 
 describe('igxOverlay', () => {
     const formatters = [
-        {pattern: /:\s/g, replacement: ':'},
-        {pattern: /red;/, replacement: 'red'}
-      ];
+        { pattern: /:\s/g, replacement: ':' },
+        { pattern: /red;/, replacement: 'red' }
+    ];
     beforeEach(async(() => {
         UIInteractions.clearOverlay();
     }));
@@ -996,6 +997,46 @@ describe('igxOverlay', () => {
             overlayDiv = document.getElementsByClassName(CLASS_OVERLAY_MAIN)[0];
             expect(overlayDiv).toBeUndefined();
         }));
+
+        it('should correctly handle close on outside click in shadow DOM', fakeAsync(() => {
+            const fix = TestBed.createComponent(EmptyPageInShadowDomComponent);
+            const button = fix.componentInstance.buttonElement;
+            const outlet = fix.componentInstance.outletElement;
+            const overlay = fix.componentInstance.overlay;
+            fix.detectChanges();
+
+            const overlaySettings: OverlaySettings = {
+                modal: false,
+                closeOnOutsideClick: true,
+                positionStrategy: new ConnectedPositioningStrategy(),
+                outlet: outlet
+            };
+
+            overlaySettings.positionStrategy.settings.target = button.nativeElement;
+            overlay.show(overlay.attach(SimpleDynamicComponent), overlaySettings);
+            tick();
+            fix.detectChanges();
+
+            let overlayDiv: Element = outlet.nativeElement.getElementsByTagName('component')[0];
+            expect(overlayDiv).toBeDefined();
+
+            const toggledDiv = overlayDiv.children[0];
+            (toggledDiv as any).click();
+
+            tick();
+            fix.detectChanges();
+
+            overlayDiv = outlet.nativeElement.getElementsByTagName('component')[0];
+            expect(overlayDiv).toBeDefined();
+
+            document.body.click();
+
+            tick();
+            fix.detectChanges();
+
+            overlayDiv = outlet.nativeElement.getElementsByTagName('component')[0];
+            expect(overlayDiv).toBeUndefined();
+        }));
     });
 
     describe('Unit Tests - Scroll Strategies: ', () => {
@@ -1431,44 +1472,44 @@ describe('igxOverlay', () => {
 
         it(`Should use StartPoint:Left/Bottom, Direction Right/Bottom and openAnimation: scaleInVerTop, closeAnimation: scaleOutVerTop
             as default options when using a ConnectedPositioningStrategy without passing other but target element options.`, () => {
-                const targetEl: HTMLElement = <HTMLElement>document.getElementsByClassName('300_button')[0];
-                const positionSettings2 = {
-                    target: targetEl
-                };
+            const targetEl: HTMLElement = <HTMLElement>document.getElementsByClassName('300_button')[0];
+            const positionSettings2 = {
+                target: targetEl
+            };
 
-                const strategy = new ConnectedPositioningStrategy(positionSettings2);
+            const strategy = new ConnectedPositioningStrategy(positionSettings2);
 
-                const expectedDefaults = {
-                    target: targetEl,
-                    horizontalDirection: HorizontalAlignment.Right,
-                    verticalDirection: VerticalAlignment.Bottom,
-                    horizontalStartPoint: HorizontalAlignment.Left,
-                    verticalStartPoint: VerticalAlignment.Bottom,
-                    openAnimation: scaleInVerTop,
-                    closeAnimation: scaleOutVerTop,
-                    minSize: { width: 0, height: 0 }
-                };
+            const expectedDefaults = {
+                target: targetEl,
+                horizontalDirection: HorizontalAlignment.Right,
+                verticalDirection: VerticalAlignment.Bottom,
+                horizontalStartPoint: HorizontalAlignment.Left,
+                verticalStartPoint: VerticalAlignment.Bottom,
+                openAnimation: scaleInVerTop,
+                closeAnimation: scaleOutVerTop,
+                minSize: { width: 0, height: 0 }
+            };
 
-                expect(strategy.settings).toEqual(expectedDefaults);
-            });
+            expect(strategy.settings).toEqual(expectedDefaults);
+        });
 
         it(`Should use target: null StartPoint:Left/Bottom, Direction Right/Bottom and openAnimation: scaleInVerTop,
             closeAnimation: scaleOutVerTop as default options when using a ConnectedPositioningStrategy without passing options.`, () => {
-                const strategy = new ConnectedPositioningStrategy();
+            const strategy = new ConnectedPositioningStrategy();
 
-                const expectedDefaults = {
-                    target: null,
-                    horizontalDirection: HorizontalAlignment.Right,
-                    verticalDirection: VerticalAlignment.Bottom,
-                    horizontalStartPoint: HorizontalAlignment.Left,
-                    verticalStartPoint: VerticalAlignment.Bottom,
-                    openAnimation: scaleInVerTop,
-                    closeAnimation: scaleOutVerTop,
-                    minSize: { width: 0, height: 0 }
-                };
+            const expectedDefaults = {
+                target: null,
+                horizontalDirection: HorizontalAlignment.Right,
+                verticalDirection: VerticalAlignment.Bottom,
+                horizontalStartPoint: HorizontalAlignment.Left,
+                verticalStartPoint: VerticalAlignment.Bottom,
+                openAnimation: scaleInVerTop,
+                closeAnimation: scaleOutVerTop,
+                minSize: { width: 0, height: 0 }
+            };
 
-                expect(strategy.settings).toEqual(expectedDefaults);
-            });
+            expect(strategy.settings).toEqual(expectedDefaults);
+        });
 
         // adding more than one component to show in igx-overlay:
         it('Should render the component exactly on top of the previous one when adding a new instance with default settings.', () => {
@@ -3801,6 +3842,20 @@ export class EmptyPageComponent {
     }
 }
 
+@Component({
+    template: `
+        <button #button>Show Overlay</button>
+        <div igxOverlayOutlet #outlet></div>
+        `,
+    encapsulation: ViewEncapsulation.ShadowDom
+})
+export class EmptyPageInShadowDomComponent {
+    constructor(@Inject(IgxOverlayService) public overlay: IgxOverlayService) { }
+
+    @ViewChild('button', { static: true }) buttonElement: ElementRef;
+    @ViewChild('outlet', { static: true }) outletElement: ElementRef;
+}
+
 @Component({
     template: `<button #button (click)='click($event)'>Show Overlay</button>`,
     styles: [`button {
@@ -3886,7 +3941,6 @@ export class TwoButtonsComponent {
         ev.stopPropagation();
     }
 }
-
 @Component({
     template: `
     <div style="width: 420px; height: 280px;">
@@ -3986,6 +4040,7 @@ export class FlexContainerComponent {
 const DYNAMIC_COMPONENTS = [
     EmptyPageComponent,
     SimpleRefComponent,
+    EmptyPageInShadowDomComponent,
     SimpleDynamicComponent,
     SimpleBigSizeComponent,
     DownRightButtonComponent,

projects/igniteui-angular/src/lib/services/overlay/overlay.ts

@@ -269,7 +269,7 @@ export class IgxOverlayService implements OnDestroy {
         const info: OverlayInfo = this.getOverlayById(id);
 
         if (!info) {
-           return;
+            return;
         }
 
         info.transformX += deltaX;
@@ -447,7 +447,7 @@ export class IgxOverlayService implements OnDestroy {
 
     private getOverlayElement(info: OverlayInfo): HTMLElement {
         if (info.settings.outlet) {
-            return info.settings.outlet.nativeElement;
+            return info.settings.outlet.nativeElement || info.settings.outlet;
         }
         if (!this._overlayElement) {
             this._overlayElement = this._document.createElement('div');
@@ -658,14 +658,14 @@ export class IgxOverlayService implements OnDestroy {
                 return;
             }
             if (info.settings.closeOnOutsideClick) {
-                const target = ev.target as any;
+                const target = ev.composed ? ev.composedPath()[0] : ev.target;
                 //  if the click is on the element do not close this overlay
                 if (!info.elementRef.nativeElement.contains(target)) {
                     // if we should exclude position target check if the click is over it. If so do not close overlay
                     const positionTarget = info.settings.positionStrategy.settings.target as HTMLElement;
                     let clickOnPositionTarget = false;
                     if (positionTarget && positionTarget.contains) {
-                        clickOnPositionTarget = positionTarget.contains(target);
+                        clickOnPositionTarget = positionTarget.contains(target as any);
                     }
 
                     if (!(info.settings.excludePositionTarget && clickOnPositionTarget)) {