[Bug Report][3.3.10] Autocomplete with "chip" and "not multiple" not working properly

[bujji1]

Environment

Vuetify Version: 3.3.10 Vue Version: 3.3.4 Browsers: Firefox 115.0 OS: Windows 10

Steps to reproduce

Please use the below configuration for auto-complete to reproduce

<v-autocomplete
    v-model="friends"
    :disabled="isUpdating"
    :items="people"
    chips
    closable-chips
    color="blue-grey-lighten-2"
    item-title="name"
    item-value="name"
    label="Select"
  >

Expected Behavior

1. Click on Chip Close should clear the input box
2. Chip click is not showing clickable cursor pointer
3. After selecting the item, it is not showing in the input field in the expected format until we focus out from that field

Actual Behavior

1. It should remove the content fully from the input box
2. Chick close should have a clickable cursor pointer
3. After selecting the item it should display in the format shown the format mentioned in the given template

Reproduction Link

https://play.vuetifyjs.com/#...

[bogdanciuca]

As a workaround, you could use clearable instead of closable-chips.

[bujji1]

@bogdanciuca - Thank you. That worked. Do you have any workaround for "After selecting the item, it is not showing in the input field in the expected format until we focus out from that field"?

[bogdanciuca]

@bujji1 Hmm, only solution I can think of is to use a ref and trigger the blur event when the model changes. Something like:

const el = ref<HTMLElement>()

<VAutocomplete
  ref="el" 
  @update:model-value="val => el?.blur()"
/>

You could make some additional checks (e.g. if (val)) if you don't want to lose focus when the input is cleared.