fix(select): can't focus input or search when isSearchable is set to false

fixes #320

Author: TotomInc

src/Select.spec.ts

@@ -380,6 +380,28 @@ describe("component props", () => {
     expect(wrapper.findAll("div[role='option']").length).toBe(options.length);
   });
 
+  it("should not allow focusing or typing when isSearchable is false", async () => {
+    const wrapper = mount(VueSelect, { props: { modelValue: null, options, isSearchable: false } });
+
+    const input = wrapper.get("input");
+
+    // Input should be readonly and removed from tab order
+    expect(input.attributes("readonly")).toBe("");
+    expect(input.attributes("tabindex")).toBe("-1");
+
+    // Focus attempt should not set focus-visible behavior or allow typing to change value
+    await input.trigger("focus");
+    await input.setValue("United");
+
+    // Menu shouldn't open due to typing, and no search event should be emitted
+    expect(wrapper.findAll("div[role='option']").length).toBe(0);
+    expect(wrapper.emitted("search")).toBeUndefined();
+
+    // Opening the menu via control still works
+    await openMenu(wrapper, "mousedown");
+    expect(wrapper.findAll("div[role='option']").length).toBe(options.length);
+  });
+
   it("should not autofocus an option when passing the autofocus prop", async () => {
     const wrapper = mount(VueSelect, { props: { modelValue: null, options, shouldAutofocusOption: false } });
 

src/Select.vue

@@ -116,8 +116,13 @@ const inputAttributes = computed(() => {
     type: "text",
   };
 
+  const nonSearchableAttrs = props.isSearchable
+    ? {}
+    : { "readonly": true, "tabindex": -1, "aria-hidden": true };
+
   return {
     ...defaultAttrs,
+    ...nonSearchableAttrs,
     ...props.inputAttrs,
   };
 });
@@ -133,7 +138,7 @@ function openMenu() {
     focusedOption.value = props.options.findIndex((option) => !option.disabled);
   }
 
-  if (inputRef.value) {
+  if (props.isSearchable && inputRef.value) {
     inputRef.value.focus();
   }
 
@@ -288,7 +293,7 @@ defineExpose({
 watch(
   () => search.value,
   () => {
-    if (search.value) {
+    if (props.isSearchable && search.value) {
       emit("search", search.value);
 
       if (!menuOpen.value) {