fix(menu): ensure root-class is applied to teleport menu

see #322

Author: TotomInc

src/Menu.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts" generic="GenericOption extends Option<OptionValue>, OptionValue = string">
+import type { HTMLAttributes } from "vue";
 import type { DataInjection, PropsInjection } from "./lib/provide-inject";
 import type { Option } from "./types/option";
 import type { MenuSlots } from "./types/slots";
@@ -9,6 +10,7 @@ import MenuOption from "./MenuOption.vue";
 
 const props = defineProps<{
   slots: MenuSlots<GenericOption, OptionValue>;
+  rootClass?: HTMLAttributes["class"];
 }>();
 
 const selected = defineModel<OptionValue | OptionValue[]>({ required: true });
@@ -133,7 +135,7 @@ onBeforeUnmount(() => {
     :id="`vue-select-${sharedProps.uid}-listbox`"
     ref="menu"
     class="menu"
-    :class="sharedProps.classes?.menuContainer"
+    :class="[sharedProps.classes?.menuContainer, props.rootClass]"
     role="listbox"
     :aria-label="sharedProps.aria?.labelledby"
     :aria-multiselectable="sharedProps.isMulti"

src/Select.spec.ts

@@ -595,6 +595,34 @@ describe("menu opening behavior", () => {
   });
 });
 
+describe("teleport class propagation", () => {
+  it("adds root custom class to teleported menu", async () => {
+    const wrapper = mount(VueSelect, {
+      props: { modelValue: null, options, teleport: "body" },
+      attrs: { class: "custom-select" },
+    });
+
+    await openMenu(wrapper);
+
+    const menus = Array.from(document.body.querySelectorAll(".menu"));
+    const menuEl = menus[menus.length - 1] as HTMLElement | undefined;
+
+    expect(menuEl).toBeTruthy();
+    if (!menuEl) {
+      return;
+    };
+
+    // Should have user-defined class copied from root container
+    expect(menuEl.classList.contains("custom-select")).toBe(true);
+
+    // Should not copy internal classes
+    expect(menuEl.classList.contains("vue-select")).toBe(false);
+    expect(menuEl.classList.contains("open")).toBe(false);
+    expect(menuEl.classList.contains("typing")).toBe(false);
+    expect(menuEl.classList.contains("disabled")).toBe(false);
+  });
+});
+
 describe("menu closing behavior", () => {
   it("should close menu with different triggers", async () => {
     const wrapper = mount(VueSelect, { props: { modelValue: null, options } });

src/Select.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts" generic="GenericOption extends Option<OptionValue>, OptionValue = string">
+import type { HTMLAttributes } from "vue";
 import type { Option } from "./types/option";
 import type { Props } from "./types/props";
 import type { Slots } from "./types/slots";
-import { computed, provide, ref, useTemplateRef, watch } from "vue";
+import { computed, provide, ref, useAttrs, useTemplateRef, watch } from "vue";
 import Indicators from "./Indicators.vue";
 import { DATA_KEY, PROPS_KEY } from "./lib/provide-inject";
 import { uniqueId } from "./lib/uid";
@@ -50,6 +51,9 @@ const emit = defineEmits<{
 const slots = defineSlots<Slots<GenericOption, OptionValue>>();
 const selected = defineModel<OptionValue | OptionValue[]>({ required: true });
 
+const attrs = useAttrs();
+const rootClass = computed(() => attrs.class as HTMLAttributes["class"]);
+
 const containerRef = useTemplateRef("container");
 const inputRef = useTemplateRef("input");
 const indicatorsRef = useTemplateRef("indicators");
@@ -447,6 +451,7 @@ watch(
       <Menu
         v-if="menuOpen"
         v-model="selected"
+        :root-class="rootClass"
         :slots="{
           'option': slots.option,
           'menu-header': slots['menu-header'],