Clicking clear closes Headless UI modal

[stevebauman]

Version

• Vue version: 3

Description

Similarly to #148, when you click the clear (X) button inside the input element, it closes the headless UI modal.

I was able to resolve this using a @click handler instead of @mousedown, which triggers the modal to close:

<Multiselect>
    <template #clear="{ clear }">
        <span :class="classes.clear" @click="clear">
            <span :class="classes.clearIcon"></span>
        </span>
    </template>
</Multiselect>

Demo

Unable to produce demo due to no available CDN for Headless UI.

[rizkhal]

Hy @stevebauman, did you find the solution?

[stevebauman]

Hi @rizkhal, yes I mentioned the solution in the description of this issue 👍

[rizkhal]

Oh yes, i followed your instructions but still not working, then i added @click.prevent and it works fine.. Thanks

[giusepetroso]

Hi guys, I'm facing the same error.

First i noticed the issue with selected tags clear button
I fixed it using @click in the "clear" slot
Then I got the same issue on the clear button of the select itself.
Can't find a way to make it work

If anyone have suggestions they'll be appreciated

[stale]

Hi 👋 this issue has been automatically marked as stale 📌 because it has not had recent activity 😴. It will be closed if no further activity occurs.

[ejirocodes]

Thanks @stevebauman, you're a genius 👍🏽

[adamberecz]

Fixed in 2.4.0 - thanks guys. Please reopen if you still encounter the issue.