fix(vue): do not throw when component type reference or floating rend…

…ers nothing (#2697)

.changeset/wise-trainers-walk.md

@@ -0,0 +1,5 @@
+---
+"@floating-ui/vue": patch
+---
+
+fix: do not throw when component type reference or floating renders nothing

packages/vue/package.json

@@ -57,6 +57,7 @@
   ],
   "dependencies": {
     "@floating-ui/dom": "workspace:^",
+    "@floating-ui/utils": "workspace:^",
     "vue-demi": ">=0.13.0"
   },
   "devDependencies": {

packages/vue/src/utils/unwrapElement.ts

@@ -1,10 +1,18 @@
+import {getNodeName, isNode} from '@floating-ui/utils/dom';
 import type {ComponentPublicInstance} from 'vue-demi';
 
 import type {MaybeElement} from '../types';
 
-export function unwrapElement<T>(element: MaybeElement<T>) {
-  return ((element as Exclude<MaybeElement<T>, T>)?.$el ?? element) as Exclude<
-    MaybeElement<T>,
-    ComponentPublicInstance
-  >;
+function isComponentPublicInstance(target: unknown): target is ComponentPublicInstance {
+  return target != null && {}.hasOwnProperty.call(target, '$el');
+}
+
+export function unwrapElement<T>(target: MaybeElement<T>) {
+  if (isComponentPublicInstance(target)) {
+    const element = target.$el as Exclude<MaybeElement<T>, ComponentPublicInstance>;
+
+    return isNode(element) && getNodeName(element) === '#comment' ? null : element;
+  }
+
+  return target as Exclude<MaybeElement<T>, ComponentPublicInstance>;
 }

packages/vue/test/index.test.ts

@@ -605,6 +605,100 @@ describe('useFloating', () => {
       expect(getByTestId('y').textContent).toBe('5');
     });
   });
+
+  test('does not throw when component type reference renders nothing', () => {
+    const FloatingReference = defineComponent({
+      name: 'FloatingReference',
+      render() {
+        return null;
+      },
+    });
+    const App = defineComponent({
+      name: 'App',
+      components: {FloatingReference},
+      setup() {
+        return setup({});
+      },
+      template: /* HTML */ `
+        <FloatingReference ref="reference" />
+        <div ref="floating" />
+      `,
+    });
+
+    render(App);
+  });
+
+  test('does not throw when component type floating renders nothing', () => {
+    const FloatingFloating = defineComponent({
+      name: 'FloatingFloating',
+      render() {
+        return null;
+      },
+    });
+    const App = defineComponent({
+      name: 'App',
+      components: {FloatingFloating},
+      setup() {
+        return setup({});
+      },
+      template: /* HTML */ `
+        <div ref="reference" />
+        <FloatingFloating ref="floating" />
+      `,
+    });
+
+    render(App);
+  });
+
+  test('does not throw when component type reference renders nothing and "$el" is null', () => {
+    const FloatingReference = defineComponent({
+      name: 'FloatingReference',
+      setup(props, {expose}) {
+        expose({$el: null});
+      },
+      render() {
+        return null;
+      },
+    });
+    const App = defineComponent({
+      name: 'App',
+      components: {FloatingReference},
+      setup() {
+        return setup({});
+      },
+      template: /* HTML */ `
+        <FloatingReference ref="reference" />
+        <div ref="floating" />
+      `,
+    });
+
+    render(App);
+  });
+
+  test('does not throw when component type floating renders nothing and "$el" is null', () => {
+    const FloatingFloating = defineComponent({
+      name: 'FloatingFloating',
+      setup(props, {expose}) {
+        expose({$el: null});
+      },
+      render() {
+        return null;
+      },
+    });
+    const App = defineComponent({
+      name: 'App',
+      components: {FloatingFloating},
+      setup() {
+        return setup({});
+      },
+      template: /* HTML */ `
+        <div ref="reference" />
+        <FloatingFloating ref="floating" />
+      `,
+    });
+
+    render(App);
+  });
 });
 
 describe('arrow', () => {