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:
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:
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