fix(select): close menu when clicking on dropdown icon (#133)

Author: TotomInc

src/Select.spec.ts

@@ -120,6 +120,18 @@ describe("input + menu interactions behavior", () => {
 
     expect(wrapper.findAll("div[role='option']").length).toBe(0);
   });
+
+  it("should close the menu when clicking on the dropdown button", async () => {
+    const wrapper = mount(VueSelect, { props: { modelValue: null, options } });
+
+    await openMenu(wrapper);
+
+    expect(wrapper.findAll("div[role='option']").length).toBe(options.length);
+
+    await wrapper.get(".dropdown-icon").trigger("click");
+
+    expect(wrapper.findAll("div[role='option']").length).toBe(0);
+  });
 });
 
 describe("menu on-open focus option", async () => {

src/Select.vue

@@ -183,6 +183,15 @@ const closeMenu = () => {
   search.value = "";
 };
 
+const toggleMenu = () => {
+  if (menuOpen.value) {
+    closeMenu();
+  }
+  else {
+    openMenu();
+  }
+};
+
 const setOption = (option: GenericOption) => {
   if (option.disabled) {
     return;
@@ -453,7 +462,7 @@ onBeforeUnmount(() => {
           class="dropdown-icon"
           tabindex="-1"
           :disabled="isDisabled"
-          @click="openMenu({ focusInput: true })"
+          @click="toggleMenu"
         >
           <slot name="dropdown">
             <ChevronDownIcon />