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.

1. user has drop down list to select items from

2. user starts to type in a item to filter

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

Answer 1

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.