Vue-select: @search triggers after clicking away or selecting an item from the list

[petsoukos]

Describe the bug
Don't really know if it is a bug or my mistake. When using the @search functionality to get the options from an Endpoint, it triggers the request again after selecting an option or clicking away to close the list. This causes a get request to the endpoint without a search term and clears the options from the list.

<v-select multiple :filterable="false" :options="search_results" @search="onSearch" 

label="name" v-model="selected_products"></v-select>

onSearch(search, loading)
{
    loading(true);
    this.fetchOptions(loading, search, this);
},
fetchOptions: _.debounce((loading, search, vm) =>
{
    axios.get('/api/product/search/'+escape(search))
        .then( resp => { vm.search_results = resp.data; loading(false);})
        .catch( err => { console.log(err.message )})
 }, 350)

Clearing the list is not a problem after selecting the wanted item, but triggering an empty search is a problem (not the end of the world tho)

[5TRAFE]

same problem :(
And the list is closed only if you click outside the item.

[ohdoski]

oh, I found something.
set clearSearchOnSelect as false. If it`s true, it make search value empty after choice item and search that empty value again

[pirminis]

EDIT: it's not an issue, since you can prematurely return from @search callback if search term is empty. For example:

<v-select @search="fetch_data"></v-select>

fetch_data: function(search, loading) {
  if (search.length === 0) {
    return
  }

  // do ajax stuff
}

[sagalbot]

Yes, @pirminis is correct. I had originally written the logic to not trigger a search event for a blank string. There were many issues asking for that to be changed, so now it triggers regardless.

[fawel11]

But this send hit to server in every key word search! Is there any way to send api call when user stop typing?

[sagalbot]

@fawel11 https://lodash.com/docs/4.17.15#debounce