click event conflict

[manafn]

Hello , I used the multiselector inside tailwind ui modal (based on headless ui) , the problem is whenever I click on tag close icon it triggers modal close, how can I fix that ?

[erlendprikss]

Hello, I had same problem as you and my workaround for that was using tag slot:
<template v-slot:tag="{ option, disabled, handleTagRemove }"> <div class="multiselect-tag"> {{ option.whatever }} <slot name="tag" v-bind:option="option"></slot> <span v-if="!disabled" class="multiselect-tag-remove" @click="handleTagRemove(option, $event)"> <span class="multiselect-tag-remove-icon"></span> </span> </div> </template>
Important thing is to call handleTagRemove method on @click event (I guess this libary by default uses something else and conflicts with headless-ui)

Hope it helps :)

[adamberecz]

Thanks for reporting @manafn, it was indeed using mousedown events which I suppose was how it was left from a previous release probably without a good reason. Let's see how it works. Fixed in 2.3.0.

[stevebauman]

Excellent, I was also encountering this issue. Appreciate your work @adamberecz 🙏