Search code examples
vue.jsvuetify.jsv-autocomplete

Close v-autocomplete after selection


I use vuetify v-autocomplete and I want it to close the dropdown, after each selection or deselection. This is my code so far

<v-autocomplete
  v-model="ddselect"
  :items="dditems"
  @change="ddchange"
  tags
  ref="ddselectRef"
  multiple
  dense
  disable-lookup
  return-object
></v-autocomplete>

and then I watch the v-model, based on the example here

ddselect: {
  handler: function() {
    setTimeout(() => {
      this.$refs.ddselectRef.menuIsActive = false;
    }, 50);
  },
  deep: true,
  immediate: true
}

But its not working.

I also tried with menu-props

<v-autocomplete
  v-model="ddselect"
  :items="dditems"
  @change="ddchange"
  tags
  ref="ddselectRef"
  multiple
  dense
  disable-lookup
  return-object
  :menu-props="{ closeOnClick:true }"
></v-autocomplete>

How can I do that?

vue 3.9.3 with vuetify 2.2.12

Thanks


Solution

  • Using the menu-props is the right approach, but you're looking for

    :menu-props="{closeOnContentClick:true}"