fix(popover): incorrectly works with overlay #UIM-102

packages/mosaic/popover/popover.component.ts

@@ -57,8 +57,7 @@ export type PopoverVisibility = 'initial' | 'visible' | 'hidden';
     changeDetection: ChangeDetectionStrategy.OnPush,
     animations: [mcPopoverAnimations.popoverState],
     host: {
-        '[class]': 'getCssClassesList',
-        '(body:click)': 'handleBodyInteraction($event)'
+        '[class]': 'getCssClassesList'
     }
 })
 export class McPopoverComponent {
@@ -193,12 +192,6 @@ export class McPopoverComponent {
         return typeof value === 'string' && value !== '';
     }
 
-    handleBodyInteraction(e): void {
-        if (this.closeOnInteraction && !this.componentElementRef.nativeElement.contains(e.target)) {
-            this.hide();
-        }
-    }
-
     animationStart() {
             this.closeOnInteraction = false;
     }
@@ -460,9 +453,21 @@ export class McPopover implements OnInit, OnDestroy {
             direction: this.direction,
             positionStrategy: strategy,
             panelClass: 'mc-popover__panel',
-            scrollStrategy: this.scrollStrategy()
+            scrollStrategy: this.scrollStrategy(),
+            hasBackdrop: this.mcTrigger === 'manual',
+            backdropClass: 'no-class'
         });
 
+        if (this.mcTrigger === 'manual') {
+            this.overlayRef.backdropClick().subscribe(() => {
+                if (!this.popover) {
+                    return;
+                }
+
+                this.popover.hide();
+            });
+        }
+
         this.updatePosition();
 
         this.overlayRef.detachments()

packages/mosaic/popover/popover.spec.ts

@@ -78,10 +78,10 @@ describe('McPopover', () => {
             expect(overlayContainerElement.textContent).toEqual(expectedValue);
 
             component.popoverVisibility = false;
-            tick();
             componentFixture.detectChanges();
-            tick();
+            tick(500);  // wait for next tick to hide
             componentFixture.detectChanges();
+
             expect(overlayContainerElement.textContent).not.toEqual(expectedValue);
         }));