fix(core) Remove floating if reference is not connected

Author: al-march

apps/ngx-popovers/src/app/pages/documentation/ui/components/code-example-tabs/code-example-tabs.component.ts

@@ -21,7 +21,7 @@ const tabTypeToLabel: Record<TabType, string> = {
   [TabType.EXAMPLE]: 'Example',
   [TabType.HTML]: 'HTML',
   [TabType.TS]: 'Typescript',
-  [TabType.SCSS]: 'scss'
+  [TabType.SCSS]: 'SCSS'
 };
 
 @Component({

apps/ngx-popovers/src/app/shared/tabs/tab/tab.component.ts

@@ -38,15 +38,8 @@ export class TabComponent<T = any> {
     this.index.set(index);
   }
 
-  constructor() {
-    effect(() => {
-      console.log('value!', this.value());
-    });
-  }
-
   @HostListener('click')
   onClick() {
-
     this.tabs.selectTab(this.value() || this.index());
   }
 }

apps/ngx-popovers/src/app/shared/tabs/tabs.component.ts

@@ -30,7 +30,6 @@ export class TabsComponent<T> {
   }
 
   selectTab(index: T) {
-    console.log('selected tab', index);
     this.active.set(index);
   }
 }

packages/core/src/lib/floating/floating.component.html

@@ -1,4 +1,4 @@
-@if (!isServer) {
+@if (!isServer && referenceConnected()) {
   <ngx-portal [bindTo]="bindTo()">
     <div
       #floating

packages/core/src/lib/floating/floating.component.spec.ts

@@ -21,11 +21,11 @@ describe('FloatingComponent', () => {
     fixture.detectChanges();
   });
 
-  const floating = () => document.querySelector('.floating') as HTMLElement;
+  const floating = (): HTMLElement => document.querySelector('.floating')!;
 
   const parentId = 'parent-id';
 
-  const createParent = () => {
+  const createReference = () => {
     const parent = document.createElement('div');
     parent.id = parentId;
     document.body.appendChild(parent);
@@ -44,21 +44,21 @@ describe('FloatingComponent', () => {
   });
 
   it('should call bind when placement changes', () => {
-    const bind = jest.spyOn(component, 'bind');
+    const bind = jest.spyOn(component, 'bindToReference');
 
     fixture.componentRef.setInput('placement', 'top');
     fixture.detectChanges();
     expect(bind).toHaveBeenCalled();
   });
 
   it('should call bind when any prop changes', () => {
-    const bind = jest.spyOn(component, 'bind');
+    const bind = jest.spyOn(component, 'bindToReference');
     component.ngOnChanges();
     expect(bind).toHaveBeenCalled();
   });
 
   it('should call bind after content init', () => {
-    const bind = jest.spyOn(component, 'bind');
+    const bind = jest.spyOn(component, 'bindToReference');
     component.ngAfterViewInit();
     expect(bind).toHaveBeenCalled();
   });
@@ -94,7 +94,7 @@ describe('FloatingComponent', () => {
   });
 
   it('should emit when click outside', () => {
-    const trigger = createParent();
+    const trigger = createReference();
     fixture.componentRef.setInput('trigger', trigger);
     const outside = jest.spyOn(component.clickedOutside, 'emit');
     document.body.click();
@@ -117,10 +117,20 @@ describe('FloatingComponent', () => {
       }
     });
 
-    await component.bind();
+    await component.bindToReference();
     await awaitTime();
     expect(compute).toHaveBeenCalled();
   });
+
+  it('should be removed if reference is not exist', () => {
+    const div = createReference();
+    fixture.componentRef.setInput('reference', div);
+    fixture.detectChanges();
+
+    div.remove();
+    fixture.detectChanges();
+    expect(floating()).toBeFalsy();
+  });
 });
 
 describe('FloatingComponent.DI', () => {

packages/core/src/lib/floating/floating.component.ts

@@ -3,13 +3,16 @@ import {
   booleanAttribute,
   Component,
   computed,
+  DoCheck,
+  effect,
   ElementRef,
   inject,
   input,
   model,
   OnChanges,
   OnDestroy,
   output,
+  signal,
   viewChild
 } from '@angular/core';
 import { CommonModule } from '@angular/common';
@@ -40,7 +43,7 @@ import { isServer } from '../injections';
   templateUrl: './floating.component.html',
   styleUrl: './floating.component.scss'
 })
-export class FloatingComponent implements AfterViewInit, OnChanges, OnDestroy {
+export class FloatingComponent implements AfterViewInit, OnChanges, DoCheck, OnDestroy {
   readonly config = inject(NGX_FLOATING_CONFIG);
   readonly floatingService = inject(FloatingService);
   readonly isServer = isServer();
@@ -53,7 +56,6 @@ export class FloatingComponent implements AfterViewInit, OnChanges, OnDestroy {
    */
   trigger = input<HTMLElement>();
   reference = input<ReferenceElement>();
-
   /**
    * TODO: remove and use reference after v.18
    */
@@ -70,6 +72,9 @@ export class FloatingComponent implements AfterViewInit, OnChanges, OnDestroy {
   clickedInside = output<Element>();
   computePositionReturn = output<ComputePositionReturn>();
 
+  /* Is reference element exist in the DOM */
+  referenceConnected = signal(false);
+
   readonly arrowMiddleware = computed(() => this.getArrowMiddleware(this.arrow()));
 
   private _computePosition$ = new BehaviorSubject<ComputePositionReturn | undefined>(undefined);
@@ -86,18 +91,30 @@ export class FloatingComponent implements AfterViewInit, OnChanges, OnDestroy {
   cleanup?: () => void;
 
   ngAfterViewInit() {
-    return this.bind();
+    return this.bindToReference();
   }
 
   ngOnChanges() {
-    return this.bind();
+    return this.bindToReference();
+  }
+
+  ngDoCheck() {
+    this.referenceConnected.set((this._reference() as HTMLElement)?.isConnected);
   }
 
   ngOnDestroy() {
     this.cleanup?.();
   }
 
-  async bind() {
+  constructor() {
+    effect(() => {
+      if (this.referenceConnected()) {
+        this.bindToReference();
+      }
+    });
+  }
+
+  async bindToReference() {
     if (this.isServer) {
       return;
     }
@@ -156,7 +173,7 @@ export class FloatingComponent implements AfterViewInit, OnChanges, OnDestroy {
    */
   setArrow(arrow: Arrow) {
     this.arrow.set(arrow);
-    return this.bind();
+    return this.bindToReference();
   }
 
   private getArrowMiddleware(arr?: Arrow) {