fix(popover): add IntersectionObserver to remove popover when host element is not visible

Author: xidedix

projects/coreui-angular/src/lib/popover/popover.directive.spec.ts

@@ -1,6 +1,7 @@
 import { ChangeDetectorRef, ElementRef, Renderer2, ViewContainerRef } from '@angular/core';
 import { ListenersService } from '../services/listeners.service';
 import { PopoverDirective } from './popover.directive';
+import { IntersectionService } from '../services';
 
 describe('PopoverDirective', () => {
   let document: Document;
@@ -11,7 +12,8 @@ describe('PopoverDirective', () => {
 
   it('should create an instance', () => {
     const listenersService = new ListenersService(renderer);
-    const directive = new PopoverDirective(document, renderer, hostElement, viewContainerRef, listenersService, changeDetectorRef);
+    const intersectionService = new IntersectionService();
+    const directive = new PopoverDirective(document, renderer, hostElement, viewContainerRef, listenersService, changeDetectorRef, intersectionService);
     expect(directive).toBeTruthy();
   });
 });

projects/coreui-angular/src/lib/popover/popover.directive.ts

@@ -1,4 +1,5 @@
 import {
+  AfterViewInit,
   ChangeDetectorRef,
   ComponentRef,
   Directive,
@@ -15,19 +16,22 @@ import {
   ViewContainerRef
 } from '@angular/core';
 import { DOCUMENT } from '@angular/common';
+import { Subscription } from 'rxjs';
+import { debounceTime } from 'rxjs/operators';
 import { createPopper, Instance, Options } from '@popperjs/core';
 
 import { Triggers } from '../coreui.types';
 import { PopoverComponent } from './popover/popover.component';
 import { IListenersConfig, ListenersService } from '../services/listeners.service';
+import { IntersectionService } from '../services';
 
 @Directive({
   selector: '[cPopover]',
   exportAs: 'cPopover',
-  providers: [ListenersService],
+  providers: [ListenersService, IntersectionService],
   standalone: true
 })
-export class PopoverDirective implements OnChanges, OnDestroy, OnInit {
+export class PopoverDirective implements OnChanges, OnDestroy, OnInit, AfterViewInit {
 
   /**
    * Content of popover
@@ -92,15 +96,23 @@ export class PopoverDirective implements OnChanges, OnDestroy, OnInit {
     ]
   };
 
+  private intersectingSubscription?: Subscription;
+
   constructor(
     @Inject(DOCUMENT) private document: Document,
     private renderer: Renderer2,
     private hostElement: ElementRef,
     private viewContainerRef: ViewContainerRef,
     private listenersService: ListenersService,
-    private changeDetectorRef: ChangeDetectorRef
+    private changeDetectorRef: ChangeDetectorRef,
+    private intersectionService: IntersectionService
   ) {}
 
+  ngAfterViewInit(): void {
+    this.intersectionService.createIntersectionObserver(this.hostElement);
+    this.intersectionServiceSubscribe();
+  }
+
   ngOnChanges(changes: SimpleChanges): void {
     if (changes['visible']) {
       changes['visible'].currentValue ? this.addPopoverElement() : this.removePopoverElement();
@@ -110,6 +122,7 @@ export class PopoverDirective implements OnChanges, OnDestroy, OnInit {
   ngOnDestroy(): void {
     this.clearListeners();
     this.destroyPopoverElement();
+    this.intersectionServiceSubscribe(false);
   }
 
   ngOnInit(): void {
@@ -140,6 +153,21 @@ export class PopoverDirective implements OnChanges, OnDestroy, OnInit {
     this.listenersService.clearListeners();
   }
 
+  private intersectionServiceSubscribe(subscribe: boolean = true): void {
+    if (subscribe) {
+      this.intersectingSubscription = this.intersectionService.intersecting$
+        .pipe(
+          debounceTime(100)
+        )
+        .subscribe(isIntersecting => {
+          this.visible = isIntersecting ? this.visible : false;
+          !this.visible && this.removePopoverElement();
+        });
+    } else {
+      this.intersectingSubscription?.unsubscribe();
+    }
+  }
+
   private getUID(prefix: string): string {
     let uid = prefix ?? 'random-id';
     do {