fix: Bring support for shadow dom on Popover (#3196)

* fix: Bring support for shadow dom on Popover * remove redundant check * fix tests
SAP · Sep 7, 2020 · 0c451ac · 0c451ac
1 parent 0953869
commit 0c451ac
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 9 deletions.
diff --git a/...rc/app/core/component-docs/popover/examples/popover-simple/popover-example.component.html b/...rc/app/core/component-docs/popover/examples/popover-simple/popover-example.component.html
@@ -6,7 +6,7 @@
         <fd-popover-body *ngIf="list1 && list1.length">
             <ul fd-list>
                 <li fd-list-item *ngFor="let option of list1">
-                    <a [attr.href]="option.url" fd-list-title>{{option.text}}</a>
+                    <a fd-list-title>{{option.text}}</a>
                 </li>
             </ul>
         </fd-popover-body>
@@ -19,7 +19,7 @@
         <fd-popover-body *ngIf="list1 && list1.length">
             <ul fd-list>
                 <li fd-list-item *ngFor="let option of list1">
-                    <a [attr.href]="option.url" fd-list-title>{{option.text}}</a>
+                    <a fd-list-title>{{option.text}}</a>
                 </li>
             </ul>
         </fd-popover-body>

diff --git a/.../src/app/core/component-docs/popover/examples/popover-simple/popover-example.component.ts b/.../src/app/core/component-docs/popover/examples/popover-simple/popover-example.component.ts
@@ -8,7 +8,7 @@ import { map } from 'rxjs/operators';
     selector: 'fd-popover-example',
     templateUrl: './popover-example.component.html',
     styleUrls: ['popover-example.component.scss'],
-    encapsulation: ViewEncapsulation.None
+    encapsulation: ViewEncapsulation.ShadowDom
 })
 export class PopoverExampleComponent {
     leftPlacement$: Observable<Placement>;

diff --git a/libs/core/src/lib/popover/popover-directive/popover.directive.spec.ts b/libs/core/src/lib/popover/popover-directive/popover.directive.spec.ts
@@ -108,20 +108,20 @@ describe('PopoverDirective', () => {
     it('should call close', () => {
         const popover = <any>fixtureTemplate.componentInstance.popoverDirective;
         popover.open();
-        const mouseEvent = { target: fixtureTemplate.componentInstance.divElement.nativeElement };
+        const mouseEvent = { composedPath: () => [fixtureTemplate.componentInstance.divElement.nativeElement] };
         expect(popover._shouldClose(mouseEvent)).toEqual(true);
     });
 
     it('shouldn\'t call close', () => {
         const popover = <any>fixtureTemplate.componentInstance.popoverDirective;
-        const mouseEvent = { target: fixtureTemplate.componentInstance.divElement.nativeElement };
+        const mouseEvent = { composedPath: () => [fixtureTemplate.componentInstance.divElement.nativeElement] };
         expect(popover._shouldClose(mouseEvent)).not.toEqual(true);
     });
 
     it('shouldn\'t call close on inside click', () => {
         const popover = <any>fixtureTemplate.componentInstance.popoverDirective;
         popover.open();
-        const mouseEvent = { target: popover.elRef.nativeElement };
+        const mouseEvent = { composedPath: () => [popover.elRef.nativeElement] };
         expect(popover._shouldClose(mouseEvent)).not.toEqual(true);
     });
 

diff --git a/libs/core/src/lib/popover/popover-directive/popover.directive.ts b/libs/core/src/lib/popover/popover-directive/popover.directive.ts
@@ -402,17 +402,30 @@ export class PopoverDirective implements OnInit, OnDestroy, OnChanges {
         }
     }
 
+    /** @hidden */
     private _shouldClose(event: MouseEvent): boolean {
         return (
             this.containerRef &&
             this.isOpen &&
             this.closeOnOutsideClick &&
-            event.target !== this.triggerRef.nativeElement &&
-            !this.triggerRef.nativeElement.contains(event.target) &&
-            !this.containerRef.location.nativeElement.contains(event.target)
+            !this._triggerContainsTarget(event) &&
+            !this._containerContainsTarget(event)
         );
     }
 
+    /** @hidden */
+    private _containerContainsTarget(event: Event): boolean {
+        const containerElement = this.containerRef.location.nativeElement;
+        return containerElement.contains(event.composedPath()[0]);
+    }
+
+    /** @hidden */
+    private _triggerContainsTarget(event: Event): boolean {
+        const triggerElement = this.triggerRef.nativeElement;
+        return triggerElement.contains(event.composedPath()[0]);
+    }
+
+    /** @hidden */
     private _handleRtlChange(rtl: boolean): void {
         if (this.placement) {
             if (rtl) {