Vuetify autocomplete both menus active at the same time

Question

Here is my code pen https://codepen.io/aaronk488/pen/MWbKNOq?editors=1011

Here is the HTML

<div id="app">
<v-app>
    <v-container >
    <v-row >
        <v-col cols="6" md="6">
        <v-autocomplete
            ref="autocomplete"
            label="Autocomplete"
            :items="components"
            hint="need to open menu on focus, just like click"                     persistent-hint
        ></v-autocomplete>
          </v-col>
          <v-col cols="6" md="6">
            <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>

and here is the JS

new Vue({
  el: "#app",
  vuetify: new Vuetify(),
  data: {
        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',
        ],
  },
   mounted () {
      let autocompleteInput = this.$refs.autocomplete.$refs.input
      autocompleteInput.addEventListener('focus', this.onFocus, true)
     let autocompleteInput2 = this.$refs.autocomplete2.$refs.input
      autocompleteInput2.addEventListener('focus', this.onFocus2, true)
    },
  methods: {
    onFocus() {
      this.$refs.autocomplete.isMenuActive = true
      this.$refs.autocomplete.isMenuActive = true
    },
    onFocus2() {
      this.$refs.autocomplete.isMenuActive = true
    }
  }
})

Here is what the UI looks like

Is there a way to get both v-autocomplete menu to show at the exact same time? If the user clicks on either v-autocomplete both that v-autocomplete and the other v-autocomplete drop-downs with the options show at the same time.

Answer 1

Set isMenuActive && isFocused to true

this.$refs.example.isMenuActive = true;
this.$refs.example.isFocused = true;