Clearing out typed text from a vuetify v-autocomplete after drop down item is selected

Question

I have this v-autocomplete field that has a list of items in a drop down. It's a multiselect, so many items can be selected.

<v-autocomplete 
  v-model="defendantCode"
  label="Defendant Code"
  :items="defendantCodeOptions"                          
  :loading="defendantCodeIsLoading"
  :filter="customFilter"
  :clear-on-select="true"
  clearable
  multiple
  dense>
</v-autocomplete>

But the problem I'm having is that when the user starts to type something into the field to filter the list, then selects an item in the list, the users typed text stays in the field, it doesn't get cleared or overwritten by the selected list item.

Is there a way to remove this when the list item is selected?

ex.

user has drop down list to select items from

user starts to type in a item to filter

then user selects item, but the initial text remains in the field

Multiselect in an autocomplete actually means you don't want the input reset when an item has been checked. Call it what you want, but the behavior of "multi-selecting" you're after is achievable by not using multiselect at all and adding each selected item to some collection and allowing for the default reset of autocomplete after each selection. If you need more help, consider adding a minimal reproducible example. — tao

chisnall.io chisnall.io · Accepted Answer · 2019-06-28T00:16:29

Hmm this was an interesting one, but going to the actual component code revealed a "searchInput" prop which is what you're after.

So you want your <autocomplete> to include @input and :search-input properties.

    <v-autocomplete 
        v-model="defendantCode"
        label="Defendant Code"
        :items="defendantCodeOptions"                          
        :loading="defendantCodeIsLoading"
        :filter="customFilter"
        clearable
        multiple
        dense
        @input="searchInput=null"
        :search-input.sync="searchInput">
    </v-autocomplete>

Then you'll want to include a data property for searchInput:

    data() {
        return {
            ...
            searchInput: null,
            ...
        }
    },

That's it.

Also, I'm guessing you guessed :clear-on-select which doesn't do anything.

Clearing out typed text from a vuetify v-autocomplete after drop down item is selected

1 Answers