Skip to content

Commit

Permalink
fix: don't open menu when is-disabled and a value is pre-selected
Browse files Browse the repository at this point in the history
closes #88
  • Loading branch information
TotomInc committed Jul 11, 2024
1 parent f45c845 commit 5adbbe1
Show file tree
Hide file tree
Showing 2 changed files with 14 additions and 3 deletions.
15 changes: 13 additions & 2 deletions src/Select.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down Expand Up @@ -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 } });

Expand Down
2 changes: 1 addition & 1 deletion src/Select.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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]) }}
Expand Down

0 comments on commit 5adbbe1

Please sign in to comment.