Close v-autocomplete after selection

Question

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

score 13 · Accepted Answer · answered Apr 13 '20 at 09:45

13

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

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

answered Apr 13 '20 at 09:45

Uchendu

1,016
12
20

3

or simply `menu-props="closeOnContentClick"` – Dionysios Arvanitis Feb 03 '21 at 11:24
1

still does not work,, when clicking outside the v-autocomplete, the selection doesn't close – Jenuel Ganawed Nov 17 '21 at 09:38
works in Vuetify3 – OverMars Mar 08 '23 at 01:32

Close v-autocomplete after selection

1 Answers1