fix(select): slot menu-header multiple rendering issue (#316)

TotomInc · web-flow · commit 7ae67286678b · 2025-09-08T08:49:38.000+02:00
#308
diff --git a/.cursor/rules/implementing-features-fixes.mdc b/.cursor/rules/implementing-features-fixes.mdc
@@ -7,6 +7,11 @@ description: End-to-end flow for implementing features and bug fixes using AI. E
 
 Use this checklist for every feature or bug fix. Do not skip steps. Commands assume npm.
 
+### 0. Important notes
+- You are writing code for a Vue 3 select component.
+- Try to think in terms of the component's API and how it should be used.
+- When necessary, take a step back and think about the architecture of the component.
+
 ### 1. Write or update tests first
 - **Where**: colocate tests in `src/*.spec.ts` (see existing examples like `src/Select.spec.ts`).
 - **Run tests**: `npm run test`
diff --git a/src/Menu.vue b/src/Menu.vue
@@ -143,6 +143,8 @@ onBeforeUnmount(() => {
       left: sharedProps.teleport ? calculateMenuPosition().left : 'unset',
     }"
   >
+    <component :is="props.slots['menu-header']" v-if="props.slots['menu-header']" />
+
     <MenuOption
       v-for="(option, i) in sharedData.availableOptions.value"
       :key="i"
@@ -155,8 +157,6 @@ onBeforeUnmount(() => {
       :class="sharedProps.classes?.menuOption"
       @select="sharedData.setOption(option)"
     >
-      <component :is="props.slots['menu-header']" />
-
       <template v-if="props.slots.option">
         <component
           :is="props.slots.option"
diff --git a/src/Select.spec.ts b/src/Select.spec.ts
@@ -644,4 +644,33 @@ describe("exposed component methods and refs", () => {
 
     expect(wrapper.emitted("update:modelValue")).toContainEqual([[]]);
   });
+
+  it("should render menu-header slot only once before options", async () => {
+    const wrapper = mount(VueSelect, {
+      props: { modelValue: null, options },
+      slots: {
+        "menu-header": () => h("div", { class: "test-menu-header" }, "Menu Header"),
+      },
+    });
+
+    await openMenu(wrapper);
+
+    // Should have exactly one menu header
+    const menuHeaders = wrapper.findAll(".test-menu-header");
+    expect(menuHeaders.length).toBe(1);
+
+    // Should have the same number of options as provided
+    const menuOptions = wrapper.findAll("div[role='option']");
+    expect(menuOptions.length).toBe(options.length);
+
+    // Menu header should appear before all options in the DOM
+    const menu = wrapper.find(".menu");
+    const menuContent = menu.element.innerHTML;
+    const headerIndex = menuContent.indexOf("test-menu-header");
+    const firstOptionIndex = menuContent.indexOf("role=\"option\"");
+
+    expect(headerIndex).toBeGreaterThan(-1);
+    expect(firstOptionIndex).toBeGreaterThan(-1);
+    expect(headerIndex).toBeLessThan(firstOptionIndex);
+  });
 });
