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

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

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

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

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

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

• javascript
• vue.js
• vuetify.js
• v-autoplete

Share Follow asked Jun 27, 2019 at 19:50 chuckdchuckd 14.7k3434 gold badges179179 silver badges396396 bronze badges 1

• Multiselect in an autoplete 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 autoplete after each selection. If you need more help, consider adding a minimal reproducible example. – tao Commented Jun 27, 2019 at 23:52

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 11

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

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

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

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.