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

Question

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.

Answer 1

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.

Answer 2

@click.stop should make the job