CODEWITHSUNDEEP
vue.jsvue-componentvuetify.js
SteveVaiBR
SteveVaiBR

Reputation: 43

How to prevent v-autocomplete from opening the dropdown drawer when clicking on a chip

I'm building an app with VueJS + Vuetify and using "v-autocomplete" as a multi-selection dropdown. However, I can't find a way to prevent the dropdown drawer from opening when I click to remove an item.

Codepen example: https://codepen.io/rafacarneiro/pen/abOVEzw?editable=true&editors=101

Code used when removing an item:

<v-chip
   v-bind="data.attrs"
   :input-value="data.selected"
   close
   @click="data.select"
   @click:close="remove(data.item)"
>

Current behaviour: when clicking on the "X" icon on a selected item, the item is removed, however, the dropdown drawer opens at the same time. I would like to prevent this behaviour when removing an item, but I've been struggling to find a way to do it.

Upvotes: 0

Views: 4863

Answers (2)

pabloRN
pabloRN

Reputation: 906

@click.stop should make the job

Upvotes: 2

Carol Skelly
Carol Skelly

Reputation: 362270

Looks almost like a dup of: How to stop select from opening when closing chip in vuetify?

If you remove the filled prop from the v-autocomplete it will work.

Upvotes: 3

Related Questions