I created a code pen that allows the user to trigger the dropdown menu for the second v-autocomplete by entering text in the first v-autocomplete. I achieved this by setting isFocused to true. However, an issue arises where the cursor automatically moves to the next v-autocomplete. Is there a way to prevent this behavior or another method to display the dropdown menu for the second v-autocomplete?
Check out my code pen at: https://codepen.io/aaronk488/pen/MWbKNOq?editors=1010
HTML
<div id="app">
<v-app>
<v-container >
<v-row >
<v-col cols="4" md="4">
<v-autocomplete
ref="autocomplete"
label="Autocomplete"
:items="components"
:search-input.sync="search"
hint="need to open menu on focus, just like click" persistent-hint
></v-autocomplete>
</v-col>
<v-col cols="4" md="4">
<v-autocomplete
ref="autocomplete2"
label="Autocomplete2"
:items="components2"
hint="need to open menu on focus, just like click this" persistent-hint
></v-autocomplete>
</v-col>
</v-row>
</v-container>
</v-app>
</div>
JS
new Vue({
el: "#app",
vuetify: new Vuetify(),
data: {
search: null,
components: [
'Autocompletes', 'Comboboxes', 'Forms', 'Inputs', 'Overflow Buttons', 'Selects', 'Selection Controls', 'Sliders', 'Textareas', 'Text Fields',
],
components2: [
'Autocompletes2', 'Comboboxes2', 'Forms2', 'Inputs2', 'Overflow Buttons2', 'Selects2', 'Selection Controls2', 'Sliders2', 'Textareas2', 'Text Fields2',
],
},
watch: {
search(){
this.$refs.autocomplete2.isMenuActive = true;
this.$refs.autocomplete2.isFocused = true;
}
},
})