wip - hitting perf issues with devtools open

src/components/DropdownMenu.vue

@@ -1,15 +1,34 @@
 <script setup lang="ts">
-import { inject } from 'vue'
+import { inject, onMounted, ref, watch } from 'vue'
 import vAppendToBody from '@/directives/appendToBody.js'
 import { VueSelectInjectionKey } from '@/symbols'
-import type { VueSelectInjectedProps } from '@/components/Select.vue'
+import type { InjectedVueSelectContext } from '@/types'
 
-const context = inject<VueSelectInjectedProps>(VueSelectInjectionKey)
+const context = inject<InjectedVueSelectContext>(VueSelectInjectionKey)
+const dropdownMenu = ref<HTMLElement | null>(null)
+
+onMounted(() => {
+  if (dropdownMenu.value) {
+    context?.value.setDropdownMenuEl(dropdownMenu.value)
+  }
+})
+
+watch(
+  () => context?.value.dropdownOpen,
+  (open) => {
+    if (open) {
+      context?.value.setDropdownMenuEl(dropdownMenu.value)
+    }
+  }
+)
+
+withDefaults(defineProps<{ as?: string }>(), { as: 'ul' })
 </script>
 
 <template>
-  <ul
-    v-if="context.dropdownOpen"
+  <Component
+    :is="as"
+    v-show="context.dropdownOpen"
     :id="`vs${context.uid}__listbox`"
     ref="dropdownMenu"
     :key="`vs${context.uid}__listbox`"
@@ -21,11 +40,28 @@ const context = inject<VueSelectInjectedProps>(VueSelectInjectionKey)
     @mouseup="context.onMouseUp"
   >
     <slot></slot>
-  </ul>
-  <ul
-    v-else
-    :id="`vs${context.uid}__listbox`"
-    role="listbox"
-    style="display: none; visibility: hidden"
-  ></ul>
+    <!--  TODO: not sure why, but using the previous system of swapping the dropdown el at open causes performance to drop drastically with Vue dev tools open -->
+    <!--  <Component-->
+    <!--    :is="as"-->
+    <!--    v-if="context.dropdownOpen"-->
+    <!--    :id="`vs${context.uid}__listbox`"-->
+    <!--    ref="dropdownMenu"-->
+    <!--    :key="`vs${context.uid}__listbox`"-->
+    <!--    v-append-to-body-->
+    <!--    class="vs__dropdown-menu"-->
+    <!--    role="listbox"-->
+    <!--    tabindex="-1"-->
+    <!--    @mousedown.prevent="context.onMousedown"-->
+    <!--    @mouseup="context.onMouseUp"-->
+    <!--  >-->
+    <!--    <slot></slot>-->
+    <!--  </Component>-->
+    <!--  <Component-->
+    <!--    :is="as"-->
+    <!--    v-else-->
+    <!--    :id="`vs${context.uid}__listbox`"-->
+    <!--    role="listbox"-->
+    <!--    style="display: none; visibility: hidden"-->
+    <!--  ></Component>-->
+  </Component>
 </template>