fix(select): improve logic to open/close menu when clicking on input or control (#352)

* fix(select): improve logic to open/close menu when clicking on the input or select control

* fix(playground): properly handle taggable by creating a new option

Author: TotomInc

playground/demos/SingleSelect.vue

@@ -5,12 +5,17 @@ import VueSelect from "../../src";
 
 const selected = ref<string | null>(null);
 
-const options: Option<string>[] = [
+const options = ref<Option<string>[]>([
   { label: "Alice's Adventures in Wonderland", value: "alice" },
   { label: "A Wizard of Earthsea", value: "wizard" },
   { label: "Harry Potter and the Philosopher's Stone", value: "harry_potter_1" },
   { label: "Harry Potter and the Chamber of Secrets", value: "harry_potter_2" },
-];
+]);
+
+const handleCreateOption = (value: string) => {
+  options.value.push({ label: value, value });
+  selected.value = value;
+};
 </script>
 
 <template>
@@ -20,6 +25,7 @@ const options: Option<string>[] = [
     :is-multi="false"
     :is-taggable="true"
     placeholder="Pick a book"
+    @option-created="(value) => handleCreateOption(value)"
   >
     <template #taggable-no-options="{ option }">
       <div class="custom-taggable-no-options">

src/Select.spec.ts

@@ -13,7 +13,16 @@ const options = [
 ];
 
 async function openMenu(wrapper: ReturnType<typeof mount>, method: "mousedown" | "focus-space" | "single-value" = "mousedown") {
+  // Check if menu is already closed, if so proceed normally
+  // If menu is open, use the dropdown toggle button instead to avoid the new toggle logic
+  const isMenuOpen = wrapper.findAll("div[role='option']").length > 0;
+
   if (method === "mousedown") {
+    if (isMenuOpen) {
+      // Menu is open, close it first then reopen
+      await wrapper.get(".dropdown-icon").trigger("click");
+    }
+
     await wrapper.get("input").trigger("mousedown");
   }
   else if (method === "focus-space") {
@@ -640,6 +649,37 @@ describe("menu closing behavior", () => {
       expect(wrapper.findAll("div[role='option']").length).toBe(0);
     }
   });
+
+  it("should toggle menu when clicking input while menu is open and search is empty", async () => {
+    const wrapper = mount(VueSelect, { props: { modelValue: null, options } });
+
+    // First click should open menu
+    await wrapper.get("input").trigger("mousedown");
+    expect(wrapper.findAll("div[role='option']").length).toBe(options.length);
+
+    // Second click should close menu (when search is empty)
+    await wrapper.get("input").trigger("mousedown");
+    expect(wrapper.findAll("div[role='option']").length).toBe(0);
+
+    // Third click should open menu again
+    await wrapper.get("input").trigger("mousedown");
+    expect(wrapper.findAll("div[role='option']").length).toBe(options.length);
+  });
+
+  it("should keep menu open when clicking input while typing", async () => {
+    const wrapper = mount(VueSelect, { props: { modelValue: null, options } });
+
+    // Open menu and start typing
+    await wrapper.get("input").trigger("mousedown");
+    expect(wrapper.findAll("div[role='option']").length).toBe(options.length);
+
+    await inputSearch(wrapper, "United");
+    expect(wrapper.findAll("div[role='option']").length).toBe(2);
+
+    // Clicking input while typing should keep menu open
+    await wrapper.get("input").trigger("mousedown");
+    expect(wrapper.findAll("div[role='option']").length).toBe(2);
+  });
 });
 
 describe("hideSelectedOptions prop", () => {

src/Select.vue

@@ -167,6 +167,22 @@ function toggleMenu() {
 
 function handleControlClick(event: MouseEvent) {
   if (indicatorsRef.value?.containerRef && !indicatorsRef.value.containerRef.contains(event.target as Node)) {
+    // If menu is open and search is empty, close it; otherwise open it
+    if (menuOpen.value && search.value.length === 0) {
+      closeMenu();
+    }
+    else {
+      openMenu();
+    }
+  }
+};
+
+function handleInputMousedown() {
+  // If menu is open and search is empty, close it; otherwise open it
+  if (menuOpen.value && search.value.length === 0) {
+    closeMenu();
+  }
+  else {
     openMenu();
   }
 };
@@ -280,6 +296,7 @@ provide(DATA_KEY, {
   closeMenu,
   toggleMenu,
   handleControlClick,
+  handleInputMousedown,
   setOption,
   removeOption,
   createOption,
@@ -424,7 +441,7 @@ watch(
             :aria-labelledby="`vue-select-${uid}-combobox`"
             :disabled="isDisabled"
             placeholder=""
-            @mousedown="openMenu()"
+            @mousedown="handleInputMousedown"
             @keydown="handleInputKeydown"
           >
         </div>

src/lib/provide-inject.ts

@@ -29,6 +29,7 @@ export type DataInjection<GenericOption extends Option<OptionValue>, OptionValue
   closeMenu: () => void;
   toggleMenu: () => void;
   handleControlClick: (event: MouseEvent) => void;
+  handleInputMousedown: () => void;
   setOption: (option: GenericOption) => void;
   removeOption: (option: GenericOption) => void;
   createOption: () => void;