Back space will remove selected item about v-autocomplete

[dbettin]

Agree. I need to be able to configure this behavior too.

[gswcm]

I had similar issue but then, after trying a deluge of possible configurations it disappeared... I guess the big part of the solution was :auto-select-one-item="false" in component instantiation.

Just in case it may help to somebody I am pasting my configuration options here

<v-autocomplete
   :items="people"
   :v-model="person"
   :get-label="getLabel"
   :component-item="template"
   :auto-select-one-item="false" 
   @change="debouncer"
   :input-attrs="{
      class: 'form-control',
      placeholder: 'Start entering the name...'
   }"/>

I am using @change with lodash.debounce in place of @update-items for more control over timeout handling, but I don't think it is crucial. Here are all three methods for reference:

debouncer: debounce(function(e) {
   this.UpdateItems(e);
}, 500),
getLabel(item) {
   return item ? `${item.firstName} ${item.lastName}` : '';
},
async UpdateItems (text) {
   try {
      const { data } = await axios.get(`/api/directory/find?query=${text || '.'}`);
      this.people = data;
   }
   catch(error) {
      if(error.response && error.response.data) {
         console.error(error.response.data.message);
      }
      else {
         console.error(error.message);
      }
   }
},

In some other issue I saw that whatever property associated with v-model (in my case it is person) needs to be initialized as null (instead of {} or '')

[pascalheraud]

We fixed the issue by returning the field value from getLabel when nothing is selected :

function getLabel(itemSelected) {
	if (itemSelected == null) {
		input = $el.querySelector("input");
		return input.value;
	}
	return itemSelected.label;
}