fix: don't open menu when is-disabled and a value is pre-selected

closes #88

Author: TotomInc

src/Select.spec.ts

@@ -10,14 +10,17 @@ const options = [
   { label: "Germany", value: "DE" },
 ];
 
-async function openMenu(wrapper: ReturnType<typeof mount>, method: "mousedown" | "focus-space" = "mousedown") {
+async function openMenu(wrapper: ReturnType<typeof mount>, method: "mousedown" | "focus-space" | "single-value" = "mousedown") {
   if (method === "mousedown") {
     await wrapper.get("input").trigger("mousedown");
   }
-  else {
+  else if (method === "focus-space") {
     await wrapper.get("input").trigger("focus");
     await wrapper.get("input").trigger("keydown", { key: "Space" });
   }
+  else if (method === "single-value") {
+    await wrapper.get(".single-value").trigger("click");
+  }
 }
 
 async function dispatchEvent(wrapper: ReturnType<typeof mount>, event: Event) {
@@ -74,6 +77,14 @@ describe("input + menu interactions behavior", () => {
     expect(wrapper.findAll("div[role='option']").length).toBe(options.length);
   });
 
+  it("should not open the menu when is-disabled and an option is selected", async () => {
+    const wrapper = mount(VueSelect, { props: { modelValue: options[0].value, options, isDisabled: true } });
+
+    await openMenu(wrapper, "single-value");
+
+    expect(wrapper.findAll("div[role='option']").length).toBe(0);
+  });
+
   it("should close the menu after focusing and pressing tab", async () => {
     const wrapper = mount(VueSelect, { props: { modelValue: null, options } });
 

src/Select.vue

@@ -384,7 +384,7 @@ onBeforeUnmount(() => {
         <div
           v-if="!props.isMulti && selectedOptions[0]"
           class="single-value"
-          @click="openMenu({ focusInput: true })"
+          @click="!props.isDisabled ? openMenu({ focusInput: true }) : null"
         >
           <slot name="value" :option="selectedOptions[0]">
             {{ getOptionLabel(selectedOptions[0]) }}