vuetify 3 v-autocomplete select all text on focus

Question

I'm attempting to select all text on a v-autocomplete vuetify 3 component when a user tabs into or selects the component so they can immediately start editing the value but I'm having issues doing this with code like the following:

<v-autocomplete
    label="Customer"
    @focus="OnCustomerFocus"
></v-autocomplete>

methods: {
    OnCustomerFocus(event: any) {
      console.log('customer focused');
      console.log(event);
      event.target.select();
    },
  }

Here is a sandbox version of what I'm trying to accomplish without success:

https://stackblitz.com/edit/cwerner-vuetify-3-v-autocomplete-select?file=src%2Fcomponents%2FShipment.vue

It appears at one time this was the default behavior of a v-autocomplete but it was removed at one point according to this github article:

https://github.com/vuetifyjs/vuetify/discussions/13562

Answer 1

Vuetify seems to shows the underlying input only during editing, and when the focus event is trigger, the input is still hidden, causing .select() to not work. You have to wait until the input is visible with nextTick():

async onCustomerFocus(event: any) {
  await nextTick()
  event.target.select();
}

Here it is in a playground