From 831e94bdf31223303a7c2e8194bd512899379bc5 Mon Sep 17 00:00:00 2001
From: Thomas Cazade <cazade.thomas@gmail.com>
Date: Sun, 17 Nov 2024 08:40:08 +0100
Subject: [PATCH] fix(select): close menu when clicking on dropdown icon

---
 src/Select.spec.ts | 12 ++++++++++++
 src/Select.vue     | 11 ++++++++++-
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/src/Select.spec.ts b/src/Select.spec.ts
index 04cf662..726ef3c 100644
--- a/src/Select.spec.ts
+++ b/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 () => {
diff --git a/src/Select.vue b/src/Select.vue
index 8a1a222..ce6d178 100644
--- a/src/Select.vue
+++ b/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 />