fix(select): checking for a search value before emitting search event causes the last letter deleted to not emit an event (#414)

Author: wade-tracy

playground/PlaygroundLayout.vue

@@ -20,6 +20,7 @@ const links = [
   { value: "/menu-header", label: "Menu Header" },
   { value: "/menu-positioning", label: "Menu Positioning" },
   { value: "/keyboard-navigation", label: "Keyboard Navigation" },
+  { value: "/search-event", label: "Search Event" },
 ];
 
 const router = useRouter();

playground/demos/SearchEvent.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type { Option } from "../../src";
+import { ref } from "vue";
+import VueSelect from "../../src";
+
+const selected = ref<string | null>(null);
+const search = ref<string | null>(null);
+
+const options = ref<Option<string>[]>([
+  { label: "Alice's Adventures in Wonderland", value: "alice" },
+  { label: "A Wizard of Earthsea", value: "wizard" },
+  { label: "Harry Potter and the Philosopher's Stone", value: "harry_potter_1" },
+  { label: "Harry Potter and the Chamber of Secrets", value: "harry_potter_2" },
+]);
+
+const handleCreateOption = (value: string) => {
+  options.value.push({ label: value, value });
+  selected.value = value;
+};
+</script>
+
+<template>
+  <p class="selected-value">
+    Search text: {{ search }}
+  </p>
+
+  <VueSelect
+    v-model="selected"
+    :options="options"
+    :is-multi="false"
+    :is-taggable="true"
+    placeholder="Pick a book"
+    @option-created="(value) => handleCreateOption(value)"
+    @search="(value) => search = value"
+  >
+    <template #taggable-no-options="{ option }">
+      <div class="custom-taggable-no-options">
+        Create option: {{ option }}
+      </div>
+    </template>
+  </VueSelect>
+
+  <p class="selected-value">
+    Selected book value: {{ selected || "none" }}
+  </p>
+</template>

playground/main.ts

@@ -13,6 +13,7 @@ import MenuPositioning from "./demos/MenuPositioning.vue";
 import MultiSelect from "./demos/MultiSelect.vue";
 import MultiSelectTaggable from "./demos/MultiSelectTaggable.vue";
 import NoSelectOnBlur from "./demos/NoSelectOnBlur.vue";
+import SearchEvent from "./demos/SearchEvent.vue";
 import SelectIsLoading from "./demos/SelectIsLoading.vue";
 import SingleSelect from "./demos/SingleSelect.vue";
 import TaggableNoOptionsSlot from "./demos/TaggableNoOptionsSlot.vue";
@@ -38,6 +39,7 @@ const router = createRouter({
     { path: "/menu-header", component: MenuHeader },
     { path: "/menu-positioning", component: MenuPositioning },
     { path: "/keyboard-navigation", component: KeyboardNavigation },
+    { path: "/search-event", component: SearchEvent },
   ],
 });
 

src/Select.spec.ts

@@ -379,6 +379,15 @@ describe("search emit", () => {
     expect(wrapper.emitted("search")).toStrictEqual([["United"]]);
   });
 
+  it("should emit the search event when clearing the input", async () => {
+    const wrapper = mount(VueSelect, { props: { modelValue: null, options } });
+
+    await inputSearch(wrapper, "United");
+    await inputSearch(wrapper, "");
+
+    expect(wrapper.emitted("search")).toStrictEqual([["United"], [""]]);
+  });
+
   it("should emit an empty string for the search when the menu is closed", async () => {
     const wrapper = mount(VueSelect, { props: { modelValue: null, options } });
 

src/Select.vue

@@ -154,7 +154,6 @@ function closeMenu() {
   menuOpen.value = false;
   search.value = "";
   focusedOption.value = -1;
-  emit("search", "");
   emit("menuClosed");
 };
 
@@ -337,8 +336,8 @@ defineExpose({
 // Watch the search input value to emit search events and auto-open the menu when typing
 watch(
   () => search.value,
-  () => {
-    if (props.isSearchable && search.value) {
+  (newSearch, oldSearch) => {
+    if (props.isSearchable && newSearch !== oldSearch) {
       emit("search", search.value);
       focusedOption.value = -1;