Nuxt/Vuetify v-autocomplete menu not showing when user type input by auto focus

1.6k Views Asked by At

i am using v-autocomplete with autofocus.

<v-autocomplete
  autofocus
  solo
  rounded
  prepend-inner-icon="mdi-magnify"
  @keyup.enter="showFilteredItems"
  id="searchInput"
  :items="stocks"
  item-text="symbol"
  item-value="name"
  :filter="customFilter"
  ref="autocomplete">
  <template v-slot:item="data">
    <v-btn block depressed :to="`/stock/${data.item.symbol}/`">
      <v-list-item-title v-html="data.item.symbol"></v-list-item-title>
      <v-list-item-subtitle v-html="data.item.name"></v-list-item-subtitle>
    </v-btn>
  </template>
</v-autocomplete>

the autocomplete work correctly when user click on it and then type the input:
the v-menu appear properly
but when user type the input without clicking on v-autocomplete, v-menu does not appear :
v-menu does not appear
however relative events emitted as expected and items are filtered.
surprisingly i tried the same code in vue (not nuxt) and it works properly!

1

There are 1 best solutions below

1
On

I think you can use :

:input-attrs="{'autofocus':true}"

like question below:

https://github.com/paliari/v-autocomplete/issues/27