feat: add teleport on the menu

TotomInc · TotomInc · commit 22443c238162 · 2024-02-12T08:22:49.000+01:00
diff --git a/README.md b/README.md
@@ -93,6 +93,12 @@ Whether the select should allow multiple selections. If `true`, the `v-model` sh
 
 Whether the dropdown should close after an option is selected.
 
+**teleport**: `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.
+
+**Note**: top and left properties are calculated using a ref on the `.vue-select` with a `container.getBoundingClientRect()`.
+
 **getOptionLabel**: `(option: Option) => string` (default: `option => option.label`)
 
 A function to get the label of an option. This is useful when you want to use a property different from `label` as the label of the option.
diff --git a/src/Select.vue b/src/Select.vue
@@ -39,6 +39,12 @@ 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;
     /**
      * A function to get the label of an option. By default, it assumes the option is an
      * object with a `label` property. Used to display the selected option in the input &
@@ -63,6 +69,7 @@ const props = withDefaults(
     isSearchable: true,
     isMulti: false,
     closeOnSelect: true,
+    teleport: undefined,
     getOptionLabel: (option: Option) => option.label,
     getMultiValueLabel: (option: Option) => option.label,
   },
@@ -210,6 +217,21 @@ 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" };
+};
+
 onMounted(() => {
   document.addEventListener("click", handleClickOutside);
   document.addEventListener("keydown", handleNavigation);
@@ -304,33 +326,43 @@ onBeforeUnmount(() => {
       </div>
     </div>
 
-    <div v-if="menuOpen" class="menu">
-      <MenuOption
-        v-for="(option, i) in filteredOptions"
-        :key="option.value"
-        type="button"
-        class="menu-option"
-        :class="{ focused: focusedOption === i, selected: option.value === selected }"
-        :is-focused="focusedOption === i"
-        :is-selected="option.value === selected"
-        @select="setOption(option.value)"
+    <Teleport :to="teleport" :disabled="!teleport">
+      <div
+        v-if="menuOpen"
+        class="menu"
+        :style="{
+          width: props.teleport ? `${container?.getBoundingClientRect().width}px` : '100%',
+          top: props.teleport ? calculateMenuPosition().top : 'unset',
+          left: props.teleport ? calculateMenuPosition().left : 'unset',
+        }"
       >
-        <slot name="option" :option="option">
-          {{ getOptionLabel(option) }}
-        </slot>
-      </MenuOption>
-
-      <div v-if="filteredOptions.length === 0" class="no-results">
-        <slot name="no-options">
-          No results found
-        </slot>
+        <MenuOption
+          v-for="(option, i) in filteredOptions"
+          :key="option.value"
+          type="button"
+          class="menu-option"
+          :class="{ focused: focusedOption === i, selected: option.value === selected }"
+          :is-focused="focusedOption === i"
+          :is-selected="option.value === selected"
+          @select="setOption(option.value)"
+        >
+          <slot name="option" :option="option">
+            {{ getOptionLabel(option) }}
+          </slot>
+        </MenuOption>
+
+        <div v-if="filteredOptions.length === 0" class="no-results">
+          <slot name="no-options">
+            No results found
+          </slot>
+        </div>
       </div>
-    </div>
+    </Teleport>
   </div>
 </template>
 
-<style lang="scss" scoped>
-.vue-select {
+<style>
+:root {
   --vs-input-bg: #fff;
   --vs-input-outline: #3b82f6;
   --vs-padding: 0.25rem 0.5rem;
@@ -348,6 +380,7 @@ onBeforeUnmount(() => {
   --vs-menu-border: 1px solid #e4e4e7;
   --vs-menu-bg: #fff;
   --vs-menu-box-shadow: none;
+  --vs-menu-z-index: 1;
 
   --vs-option-padding: 8px 12px;
   --vs-option-font-size: var(--vs-font-size);
@@ -373,7 +406,11 @@ onBeforeUnmount(() => {
   --vs-icon-color: var(--vs-text-color);
 
   --vs-dropdown-transition: transform 0.25s ease-out;
+}
+</style>
 
+<style lang="scss" scoped>
+.vue-select {
   position: relative;
   box-sizing: border-box;
   width: 100%;
@@ -528,6 +565,7 @@ onBeforeUnmount(() => {
   border-radius: var(--vs-border-radius);
   box-shadow: var(--vs-menu-box-shadow);
   background-color: var(--vs-menu-bg);
+  z-index: var(--vs-menu-z-index);
 }
 
 .menu-option {

No results found