Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 329
codebot Avatar asked Dec 22 '22 18:12

codebot


1 Answers

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

:menu-props="{closeOnContentClick:true}"
like image 166
Uchendu Avatar answered Jan 02 '23 17:01

Uchendu