fix(overlay): Fixing overflow bug in overlay

- Now pinning overlay and unpinning (inside target) will properly reopen overlay
dynatrace-oss · Dec 20, 2021 · 0da13cd · 0da13cd
1 parent 58dff47
commit 0da13cd
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 24 deletions.
diff --git a/libs/barista-components/overlay/src/overlay-trigger.spec.ts b/libs/barista-components/overlay/src/overlay-trigger.spec.ts
@@ -24,8 +24,8 @@ import {
   ComponentFixture,
   TestBed,
   fakeAsync,
-  flush,
   inject,
+  tick,
 } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
@@ -81,7 +81,7 @@ describe('DtOverlayTrigger', () => {
 
     dispatchMouseEvent(trigger, 'mouseleave');
     fixture.detectChanges();
-    flush();
+    tick();
 
     overlay = getContainerElement(overlayContainerElement);
     expect(overlay).toBeNull();
@@ -99,7 +99,7 @@ describe('DtOverlayTrigger', () => {
       trigger.getBoundingClientRect().top + offset,
     );
     fixture.detectChanges();
-    flush();
+    tick();
 
     const overlayPane = overlayContainerElement.querySelector(
       '.cdk-overlay-pane',
@@ -135,10 +135,10 @@ describe('DtOverlayTrigger', () => {
 
     dispatchMouseEvent(trigger, 'click');
     fixture.detectChanges();
-    flush();
+    tick();
 
     dispatchMouseEvent(trigger, 'mouseleave');
-    flush();
+    tick();
 
     const overlay = getContainerElement(overlayContainerElement);
     expect(overlay).not.toBeNull();
@@ -151,7 +151,7 @@ describe('DtOverlayTrigger', () => {
 
     dispatchMouseEvent(trigger, 'click');
     fixture.detectChanges();
-    flush();
+    tick();
 
     expect(fixture.componentInstance.pinned).toBeTruthy();
   }));
@@ -163,14 +163,15 @@ describe('DtOverlayTrigger', () => {
 
     dispatchMouseEvent(trigger, 'click');
     fixture.detectChanges();
-    flush();
+    tick();
 
     expect(fixture.componentInstance.pinned).toBeTruthy();
 
     dispatchMouseEvent(trigger, 'mouseleave');
     dispatchMouseEvent(trigger, 'mouseenter');
     dispatchMouseEvent(trigger, 'mousemove');
     fixture.detectChanges();
+    tick();
 
     expect(fixture.componentInstance.pinned).toBeTruthy();
   }));
@@ -182,13 +183,13 @@ describe('DtOverlayTrigger', () => {
 
     dispatchMouseEvent(trigger, 'click');
     fixture.detectChanges();
-    flush();
+    tick();
 
     expect(fixture.componentInstance.pinned).toBeTruthy();
 
     fixture.componentInstance.showTrigger = false;
     fixture.detectChanges();
-    flush();
+    tick();
 
     expect(fixture.componentInstance.pinned).toBeFalsy();
   }));
@@ -200,17 +201,19 @@ describe('DtOverlayTrigger', () => {
 
     dispatchMouseEvent(trigger, 'click');
     fixture.detectChanges();
-    flush();
+    tick();
 
     dispatchMouseEvent(trigger, 'mouseleave');
     fixture.detectChanges();
+    tick();
 
     let overlay = getOverlayPane(overlayContainerElement);
+    expect(overlay).not.toBeNull();
 
     dispatchMouseEvent(trigger, 'mouseenter');
     dispatchMouseEvent(trigger, 'mousemove');
     fixture.detectChanges();
-    flush();
+    tick();
 
     overlay = getOverlayPane(overlayContainerElement);
 
@@ -230,7 +233,7 @@ describe('DtOverlayTrigger', () => {
       trigger.getBoundingClientRect().top + offset,
     );
     fixture.detectChanges();
-    flush();
+    tick();
 
     const overlayPane = overlayContainerElement.querySelector(
       '.cdk-overlay-pane',
@@ -256,7 +259,7 @@ describe('DtOverlayTrigger', () => {
       trigger.getBoundingClientRect().top + offset,
     );
     fixture.detectChanges();
-    flush();
+    tick();
 
     const overlayPane = overlayContainerElement.querySelector(
       '.cdk-overlay-pane',
@@ -294,7 +297,7 @@ describe('DtOverlayTrigger', () => {
 
     dispatchMouseEvent(trigger, 'click');
     fixture.detectChanges();
-    flush();
+    tick();
 
     expect(document.activeElement).not.toBe(previouslyFocused);
   }));
@@ -322,7 +325,7 @@ describe('DtOverlayTrigger', () => {
     expect(overlay).not.toBeNull();
     dispatchKeyboardEvent(trigger, 'keydown', ESCAPE);
     fixture.detectChanges();
-    flush();
+    tick();
     overlay = getContainerElement(overlayContainerElement);
 
     expect(overlay).toBeNull();
@@ -346,7 +349,7 @@ describe('DtOverlayTrigger', () => {
 
     fixture.componentInstance.showTrigger = false;
     fixture.detectChanges();
-    flush();
+    tick();
 
     overlay = getContainerElement(overlayContainerElement);
     expect(overlay).toBeNull();
@@ -360,7 +363,7 @@ function initOverlay(
   dispatchMouseEvent(trigger, 'mouseenter');
   dispatchMouseEvent(trigger, 'mousemove');
   fixture.detectChanges();
-  flush();
+  tick();
 }
 
 function getContainerElement(

diff --git a/libs/barista-components/overlay/src/overlay-trigger.ts b/libs/barista-components/overlay/src/overlay-trigger.ts
@@ -28,7 +28,8 @@ import {
   Output,
   TemplateRef,
 } from '@angular/core';
-import { Subscription, fromEvent, EMPTY } from 'rxjs';
+import { Subscription, fromEvent, EMPTY, merge, of } from 'rxjs';
+import { delay } from 'rxjs/operators';
 
 import {
   CanDisable,
@@ -53,7 +54,6 @@ export const _DtOverlayTriggerMixin = mixinTabIndex(
   host: {
     '(mouseenter)': '_handleMouseEnter($event)',
     '(mouseleave)': '_handleMouseLeave($event)',
-    '(mouseover)': '!disabled && _handleMouseMove($event, $event)',
     '(keydown)': '_handleKeydown($event)',
     '(click)': '_handleClick()',
     class: 'dt-overlay-trigger',
@@ -134,11 +134,12 @@ export class DtOverlayTrigger<T>
       enterEvent.stopPropagation();
       this._moveSub.unsubscribe();
       this._moveSub = this._ngZone.runOutsideAngular(() =>
-        fromEvent(this.elementRef.nativeElement, 'mousemove').subscribe(
-          (ev: MouseEvent) => {
-            this._handleMouseMove(ev, enterEvent);
-          },
-        ),
+        merge(
+          of(enterEvent).pipe(delay(0)),
+          fromEvent(this.elementRef.nativeElement, 'mousemove'),
+        ).subscribe((ev: MouseEvent) => {
+          this._handleMouseMove(ev, enterEvent);
+        }),
       );
     }
   }