Fix: fix some popover closing behavior

diff --git a/src-ui/src/app/components/common/preview-popup/preview-popup.component.html b/src-ui/src/app/components/common/preview-popup/preview-popup.component.html
index 18b7cb94dbc7aa2cab70d0b63edcedbf70dc73c9..59c179832dec3a23b00b94a4ce3eabea183aabb1 100644 (file)
--- a/src-ui/src/app/components/common/preview-popup/preview-popup.component.html
+++ b/src-ui/src/app/components/common/preview-popup/preview-popup.component.html
@@ -4,7 +4,7 @@
   <ng-content></ng-content>
 </a>
 <ng-template #previewContent>
-  <div class="preview-popup-container">
+  <div class="preview-popup-container" (mouseenter)="mouseEnterPreview()" (mouseleave)="mouseLeavePreview(); close()">
     @if (error) {
       <div class="w-100 h-100 position-relative">
         <p class="fst-italic position-absolute top-50 start-50 translate-middle" i18n>Error loading preview</p>

diff --git a/src-ui/src/app/components/common/preview-popup/preview-popup.component.spec.ts b/src-ui/src/app/components/common/preview-popup/preview-popup.component.spec.ts
index a9cc9c9fd6ea1e0c9d27e70039082324a7785a2c..3b5e7e4ba4169c9912799da39e95e98a4b719afb 100644 (file)
--- a/src-ui/src/app/components/common/preview-popup/preview-popup.component.spec.ts
+++ b/src-ui/src/app/components/common/preview-popup/preview-popup.component.spec.ts
@@ -1,9 +1,4 @@
-import {
-  ComponentFixture,
-  fakeAsync,
-  TestBed,
-  tick,
-} from '@angular/core/testing'
+import { ComponentFixture, TestBed } from '@angular/core/testing'
 
 import {
   HttpClient,
@@ -61,6 +56,7 @@ describe('PreviewPopupComponent', () => {
     fixture = TestBed.createComponent(PreviewPopupComponent)
     component = fixture.componentInstance
     component.document = { ...doc }
+    jest.useFakeTimers()
     fixture.detectChanges()
   })
 
@@ -139,16 +135,36 @@ describe('PreviewPopupComponent', () => {
     expect(component.previewText).toEqual('Preview text')
   })
 
-  it('should show preview on mouseover after delay to preload content', fakeAsync(() => {
+  it('should show preview on mouseover after delay to preload content', () => {
     component.mouseEnterPreview()
     expect(component.popover.isOpen()).toBeTruthy()
-    tick(600)
+    jest.advanceTimersByTime(600)
+    component.close()
+    jest.advanceTimersByTime(600)
+  })
+
+  it('should not show preview on mouseover if mouse no longer on preview', () => {
+    component.mouseEnterPreview()
+    jest.advanceTimersByTime(100)
+    component.mouseLeavePreview()
+    jest.advanceTimersByTime(600)
+    expect(component.popover.isOpen()).toBeFalsy()
+  })
+
+  it('should not close preview on mouseleave if mouse back on preview', () => {
     component.close()
+    component.mouseEnterPreview()
+    jest.advanceTimersByTime(300)
+    expect(component.popover.isOpen()).toBeTruthy()
+  })
 
+  it('should support immediate close on mouseleave', () => {
     component.mouseEnterPreview()
-    tick(100)
+    jest.advanceTimersByTime(600)
+    expect(component.popover.isOpen()).toBeTruthy()
     component.mouseLeavePreview()
-    tick(600)
+    component.close(true)
+    jest.advanceTimersByTime(1)
     expect(component.popover.isOpen()).toBeFalsy()
-  }))
+  })
 })

diff --git a/src-ui/src/app/components/common/preview-popup/preview-popup.component.ts b/src-ui/src/app/components/common/preview-popup/preview-popup.component.ts
index 75f3cbb869f8e7227a104c2cad41a3d8f351020f..39370c1b7ab72ae764f66136fe37a0226007ad16 100644 (file)
--- a/src-ui/src/app/components/common/preview-popup/preview-popup.component.ts
+++ b/src-ui/src/app/components/common/preview-popup/preview-popup.component.ts
@@ -46,7 +46,7 @@ export class PreviewPopupComponent implements OnDestroy {
 
   @ViewChild('popover') popover: NgbPopover
 
-  mouseOnPreview: boolean
+  mouseOnPreview: boolean = false
 
   popoverClass: string = 'shadow popover-preview'
 
@@ -118,7 +118,7 @@ export class PreviewPopupComponent implements OnDestroy {
           // show popover
           this.popoverClass = this.popoverClass.replace('pe-none opacity-0', '')
         } else {
-          this.popover.close()
+          this.popover.close(true)
         }
       }, 600)
     }
@@ -128,7 +128,12 @@ export class PreviewPopupComponent implements OnDestroy {
     this.mouseOnPreview = false
   }
 
-  public close() {
-    this.popover.close(false)
+  public close(immediate: boolean = false) {
+    setTimeout(
+      () => {
+        if (!this.mouseOnPreview) this.popover.close()
+      },
+      immediate ? 0 : 300
+    )
   }
 }