fix(select): remove teleport option due to SSR issues and bad API/implementation

TotomInc · TotomInc · commit 65e07b9ecbd8 · 2025-02-07T14:18:22.000+01:00
need to be re-worked entirely with a great API and avoid SSR issues such as with VitePress
diff --git a/README.md b/README.md
@@ -39,7 +39,6 @@
 - 🎨 Great styling out-of-the-box, customization with CSS variables & Vue `:deep`
 - ✅ Single & multi-select support
 - 🖌️ Infinite customization with `<slot>`s
-- 🪄 `<Teleport />` menu where you want
 - 📦 Extremely light, **0 dependencies** (4.4kb gzip)
 
 ## Installation
diff --git a/docs/props.md b/docs/props.md
@@ -159,18 +159,6 @@ Whether the first option should be focused when the dropdown is opened. If set t
 
 Whether the dropdown should close after an option is selected.
 
-## teleport
-
-**Type**: `string`
-
-**Default**: `undefined`
-
-Teleport the menu outside of the component DOM tree. You can pass a valid string according to the official Vue 3 Teleport documentation (e.g. `teleport="body"` will teleport the menu into the `<body>` tree). This can be used in case you are having `z-index` issues within your DOM tree structure.
-
-::: info
-Top and left properties are calculated using a ref on the `.vue-select` with a `container.getBoundingClientRect()`.
-:::
-
 ## inputId
 
 **Type**: `string`
diff --git a/src/Select.vue b/src/Select.vue
@@ -59,12 +59,6 @@ const props = withDefaults(
      * When set to true, clear the search input when an option is selected.
      */
     closeOnSelect?: boolean;
-    /**
-     * Teleport the menu to another part of the DOM with higher priority such as `body`.
-     * This way, you can avoid z-index issues. Menu position will be calculated using
-     * JavaScript, instead of using CSS absolute & relative positioning.
-     */
-    teleport?: string;
     /**
      * The ID of the input element. This is useful for accessibility or forms.
      */
@@ -110,7 +104,6 @@ const props = withDefaults(
     isMenuOpen: undefined,
     shouldAutofocusOption: true,
     closeOnSelect: true,
-    teleport: undefined,
     inputId: undefined,
     aria: undefined,
     filterBy: (option: GenericOption, label: string, search: string) => label.toLowerCase().includes(search.toLowerCase()),
@@ -363,21 +356,6 @@ const handleClickOutside = (event: MouseEvent) => {
   }
 };
 
-const calculateMenuPosition = () => {
-  if (container.value) {
-    const rect = container.value.getBoundingClientRect();
-
-    return {
-      left: `${rect.x}px`,
-      top: `${rect.y + rect.height}px`,
-    };
-  }
-
-  console.warn("Unable to calculate dynamic menu position because of missing internal DOM reference.");
-
-  return { top: "0px", left: "0px" };
-};
-
 watch(
   () => search.value,
   () => {
@@ -516,64 +494,53 @@ onBeforeUnmount(() => {
       </div>
     </div>
 
-    <Teleport
-      :to="teleport"
-      :disabled="!teleport"
-      :defer="true"
+    <div
+      v-if="menuOpen"
+      ref="menu"
+      class="menu"
+      role="listbox"
+      :aria-label="aria?.labelledby"
+      :aria-multiselectable="isMulti"
     >
-      <div
-        v-if="menuOpen"
-        ref="menu"
-        class="menu"
-        role="listbox"
-        :aria-label="aria?.labelledby"
-        :aria-multiselectable="isMulti"
-        :style="{
-          width: props.teleport ? `${container?.getBoundingClientRect().width}px` : '100%',
-          top: props.teleport ? calculateMenuPosition().top : 'unset',
-          left: props.teleport ? calculateMenuPosition().left : 'unset',
-        }"
+      <slot name="menu-header" />
+
+      <MenuOption
+        v-for="(option, i) in availableOptions"
+        :key="i"
+        type="button"
+        class="menu-option"
+        :class="{ focused: focusedOption === i, selected: option.value === selected }"
+        :menu="menu"
+        :index="i"
+        :is-focused="focusedOption === i"
+        :is-selected="option.value === selected"
+        :is-disabled="option.disabled || false"
+        @select="setOption(option)"
       >
-        <slot name="menu-header" />
-
-        <MenuOption
-          v-for="(option, i) in availableOptions"
-          :key="i"
-          type="button"
-          class="menu-option"
-          :class="{ focused: focusedOption === i, selected: option.value === selected }"
-          :menu="menu"
-          :index="i"
-          :is-focused="focusedOption === i"
-          :is-selected="option.value === selected"
-          :is-disabled="option.disabled || false"
-          @select="setOption(option)"
-        >
-          <slot name="option" :option="option">
-            {{ getOptionLabel(option) }}
-          </slot>
-        </MenuOption>
+        <slot name="option" :option="option">
+          {{ getOptionLabel(option) }}
+        </slot>
+      </MenuOption>
 
-        <div v-if="!isTaggable && availableOptions.length === 0" class="no-results">
-          <slot name="no-options">
-            No results found
-          </slot>
-        </div>
+      <div v-if="!isTaggable && availableOptions.length === 0" class="no-results">
+        <slot name="no-options">
+          No results found
+        </slot>
+      </div>
 
-        <div
-          v-if="isTaggable && search"
-          class="taggable-no-options"
-          @click="createOption"
+      <div
+        v-if="isTaggable && search"
+        class="taggable-no-options"
+        @click="createOption"
+      >
+        <slot
+          name="taggable-no-options"
+          :option="search"
         >
-          <slot
-            name="taggable-no-options"
-            :option="search"
-          >
-            Press enter to add {{ search }} option
-          </slot>
-        </div>
+          Press enter to add {{ search }} option
+        </slot>
       </div>
-    </Teleport>
+    </div>
   </div>
 </template>
 
@@ -788,6 +755,7 @@ onBeforeUnmount(() => {
   right: 0;
   padding: var(--vs-menu-padding);
   margin-top: var(--vs-menu-offset-top);
+  width: 100%;
   max-height: var(--vs-menu-height);
   overflow-y: auto;
   border: var(--vs-menu-border);
