fix(popover): scrollbar flickering, refactor

Author: xidedix

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

@@ -1,17 +1,16 @@
-import { ComponentFactoryResolver, ElementRef, Renderer2, ViewContainerRef } from '@angular/core';
+import { ElementRef, Renderer2, ViewContainerRef } from '@angular/core';
 import { ListenersService } from '../services/listeners.service';
 import { PopoverDirective } from './popover.directive';
 
 describe('PopoverDirective', () => {
   let document: Document;
   let renderer: Renderer2;
   let hostElement: ElementRef;
-  let componentFactoryResolver: ComponentFactoryResolver;
   let viewContainerRef: ViewContainerRef;
 
   it('should create an instance', () => {
     const listenersService = new ListenersService(renderer);
-    const directive = new PopoverDirective(document, renderer, hostElement, componentFactoryResolver, viewContainerRef, listenersService);
+    const directive = new PopoverDirective(document, renderer, hostElement, viewContainerRef, listenersService);
     expect(directive).toBeTruthy();
   });
 });

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

@@ -1,5 +1,4 @@
 import {
-  ComponentFactoryResolver,
   ComponentRef,
   Directive,
   ElementRef,
@@ -95,7 +94,6 @@ export class PopoverDirective implements OnChanges, OnDestroy, OnInit {
     @Inject(DOCUMENT) private document: any,
     private renderer: Renderer2,
     private hostElement: ElementRef,
-    private componentFactoryResolver: ComponentFactoryResolver,
     private viewContainerRef: ViewContainerRef,
     private listenersService: ListenersService
   ) {}
@@ -150,9 +148,8 @@ export class PopoverDirective implements OnChanges, OnDestroy, OnInit {
 
   private createPopoverElement(): void {
     if (!this.popoverRef) {
-      const popoverComponent =
-        this.componentFactoryResolver.resolveComponentFactory(PopoverComponent);
-      this.popoverRef = popoverComponent.create(this.viewContainerRef.injector);
+      this.popoverRef = this.viewContainerRef.createComponent<PopoverComponent>(PopoverComponent);
+      // this.viewContainerRef.detach();
     }
   }
 
@@ -162,8 +159,8 @@ export class PopoverDirective implements OnChanges, OnDestroy, OnInit {
     // @ts-ignore
     this.popoverRef = undefined;
     this.popperInstance?.destroy();
-    this.viewContainerRef.detach();
-    this.viewContainerRef.clear();
+    this.viewContainerRef?.detach();
+    this.viewContainerRef?.clear();
   }
 
   private addPopoverElement(): void {
@@ -172,36 +169,46 @@ export class PopoverDirective implements OnChanges, OnDestroy, OnInit {
     }
     this.popoverRef.instance.content = this.content;
     this.popover = this.popoverRef.location.nativeElement;
+    this.renderer.addClass(this.popover, 'd-none');
     this.renderer.addClass(this.popover, 'fade');
 
+    this.popperInstance?.destroy();
+
     setTimeout(() => {
       this.popperInstance = createPopper(
         this.hostElement.nativeElement,
         this.popover,
         { ...this.popperOptions }
       );
       this.viewContainerRef.insert(this.popoverRef.hostView);
+      this.renderer.appendChild(this.document.body, this.popover);
+      if (!this.visible) {
+        this.removePopoverElement();
+        return;
+      }
       setTimeout(() => {
         this.popoverId = this.getUID('popover');
         this.popoverRef.instance.id = this.popoverId;
+        if (!this.visible) {
+          this.removePopoverElement();
+          return;
+        }
+        this.renderer.removeClass(this.popover, 'd-none');
         this.popoverRef.instance.visible = this.visible;
-        this.renderer.appendChild(this.document.body, this.popover);
         this.popperInstance.forceUpdate();
-        // this.popoverRef.changeDetectorRef.markForCheck();
       }, 100);
     });
   }
 
   private removePopoverElement(): void {
+    this.popoverId = '';
     if (!this.popoverRef) {
       return;
     }
     this.popoverRef.instance.visible = this.visible;
     this.popoverRef.instance.id = undefined;
     setTimeout(() => {
       this.viewContainerRef.detach();
-      this.popperInstance?.destroy();
-      this.popoverId = '';
     }, 300);
   }
 }