From 72aac1cf660089d4d78532b3da9ea722b792fea7 Mon Sep 17 00:00:00 2001
From: Shean de Montigny-Desautels <s.montigny-desautels@softdb.com>
Date: Thu, 19 Jan 2023 10:56:12 -0500
Subject: [PATCH] fix(appendToBody) use vue built-in Teleport

The teleport component will move the menu to the body
and do a proper cleanup.

We could also expose the "to" props to be configurable
by the end user.
---
 dev/Dev.vue                    | 13 ++++-
 src/components/Select.vue      | 98 +++++++++++++++++-----------------
 src/directives/appendToBody.js |  5 --
 3 files changed, 62 insertions(+), 54 deletions(-)

diff --git a/dev/Dev.vue b/dev/Dev.vue
index ab8e964a5..787c702f6 100644
--- a/dev/Dev.vue
+++ b/dev/Dev.vue
@@ -1,6 +1,7 @@
 <template>
   <div id="app">
-    <v-select v-model="selected" v-bind="config" />
+    <button v-if="config.appendToBody" @click="hide">Hide</button>
+    <v-select v-if="!hidden" v-model="selected" v-bind="config" />
   </div>
 </template>
 
@@ -11,11 +12,21 @@ import countries from '../docs/.vuepress/data/countryCodes.js'
 export default {
   components: { vSelect },
   data: () => ({
+    hidden: false,
     selected: null,
     config: {
       options: countries,
+      appendToBody: true,
     },
   }),
+  methods: {
+    hide() {
+      this.hidden = true
+      setTimeout(() => {
+        this.hidden = false
+      }, 2000)
+    },
+  },
 }
 </script>
 
diff --git a/src/components/Select.vue b/src/components/Select.vue
index 0f81b6b68..87375b462 100644
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -82,55 +82,57 @@
         </slot>
       </div>
     </div>
-    <transition :name="transition">
-      <ul
-        v-if="dropdownOpen"
-        :id="`vs${uid}__listbox`"
-        ref="dropdownMenu"
-        :key="`vs${uid}__listbox`"
-        v-append-to-body
-        class="vs__dropdown-menu"
-        role="listbox"
-        tabindex="-1"
-        @mousedown.prevent="onMousedown"
-        @mouseup="onMouseUp"
-      >
-        <slot name="list-header" v-bind="scope.listHeader" />
-        <li
-          v-for="(option, index) in filteredOptions"
-          :id="`vs${uid}__option-${index}`"
-          :key="getOptionKey(option)"
-          role="option"
-          class="vs__dropdown-option"
-          :class="{
-            'vs__dropdown-option--deselect':
-              isOptionDeselectable(option) && index === typeAheadPointer,
-            'vs__dropdown-option--selected': isOptionSelected(option),
-            'vs__dropdown-option--highlight': index === typeAheadPointer,
-            'vs__dropdown-option--disabled': !selectable(option),
-          }"
-          :aria-selected="index === typeAheadPointer ? true : null"
-          @mouseover="selectable(option) ? (typeAheadPointer = index) : null"
-          @click.prevent.stop="selectable(option) ? select(option) : null"
+    <Teleport to="body" :disabled="!appendToBody">
+      <transition :name="transition">
+        <ul
+          v-if="dropdownOpen"
+          :id="`vs${uid}__listbox`"
+          ref="dropdownMenu"
+          :key="`vs${uid}__listbox`"
+          v-append-to-body
+          class="vs__dropdown-menu"
+          role="listbox"
+          tabindex="-1"
+          @mousedown.prevent="onMousedown"
+          @mouseup="onMouseUp"
         >
-          <slot name="option" v-bind="normalizeOptionForSlot(option)">
-            {{ getOptionLabel(option) }}
-          </slot>
-        </li>
-        <li v-if="filteredOptions.length === 0" class="vs__no-options">
-          <slot name="no-options" v-bind="scope.noOptions">
-            Sorry, no matching options.
-          </slot>
-        </li>
-        <slot name="list-footer" v-bind="scope.listFooter" />
-      </ul>
-      <ul
-        v-else
-        :id="`vs${uid}__listbox`"
-        role="listbox"
-        style="display: none; visibility: hidden"
-      ></ul>
-    </transition>
+          <slot name="list-header" v-bind="scope.listHeader" />
+          <li
+            v-for="(option, index) in filteredOptions"
+            :id="`vs${uid}__option-${index}`"
+            :key="getOptionKey(option)"
+            role="option"
+            class="vs__dropdown-option"
+            :class="{
+              'vs__dropdown-option--deselect':
+                isOptionDeselectable(option) && index === typeAheadPointer,
+              'vs__dropdown-option--selected': isOptionSelected(option),
+              'vs__dropdown-option--highlight': index === typeAheadPointer,
+              'vs__dropdown-option--disabled': !selectable(option),
+            }"
+            :aria-selected="index === typeAheadPointer ? true : null"
+            @mouseover="selectable(option) ? (typeAheadPointer = index) : null"
+            @click.prevent.stop="selectable(option) ? select(option) : null"
+          >
+            <slot name="option" v-bind="normalizeOptionForSlot(option)">
+              {{ getOptionLabel(option) }}
+            </slot>
+          </li>
+          <li v-if="filteredOptions.length === 0" class="vs__no-options">
+            <slot name="no-options" v-bind="scope.noOptions">
+              Sorry, no matching options.
+            </slot>
+          </li>
+          <slot name="list-footer" v-bind="scope.listFooter" />
+        </ul>
+        <ul
+          v-else
+          :id="`vs${uid}__listbox`"
+          role="listbox"
+          style="display: none; visibility: hidden"
+        ></ul>
+      </transition>
+    </Teleport>
     <slot name="footer" v-bind="scope.footer" />
   </div>
 </template>
diff --git a/src/directives/appendToBody.js b/src/directives/appendToBody.js
index 514e1446b..60e4de5cd 100644
--- a/src/directives/appendToBody.js
+++ b/src/directives/appendToBody.js
@@ -14,8 +14,6 @@ export default {
         left: scrollX + left + 'px',
         top: scrollY + top + height + 'px',
       })
-
-      document.body.appendChild(el)
     }
   },
 
@@ -24,9 +22,6 @@ export default {
       if (el.unbindPosition && typeof el.unbindPosition === 'function') {
         el.unbindPosition()
       }
-      if (el.parentNode) {
-        el.parentNode.removeChild(el)
-      }
     }
   },
 }