vue-select
vue-select copied to clipboard
selected-option-container slot loses deselectButtons ref
I want to use the selected-option-container slot, it works fine except that it looses the deselectButtons ref somewhere. The problem is that after the click on tag removal button (I'm using multiple tag select) it removes the selected tag, but also clicks the select at the same time. So in one mouse click I remove the unwanted item but it also opens the select itself.
This check seems to skip the button click: https://github.com/sagalbot/vue-select/blob/master/src/components/Select.vue#L1097C25-L1097C35
And this is my slot template. I put the ref inside the button, click action with deselect function works fine, but somehow it misses the ignoredButtons check from Select.vue component.
Version:
"vue-select": "^3.15.0",
<template #selected-option-container="{ option, deselect }">
<span class="vs__selected"
>{{ option[getTitleKey()] }}
<button
ref="deselectButtons"
type="button"
class="vs__deselect"
:title="`Deselect ${option[getTitleKey()]}`"
:aria-label="`Deselect ${option[getTitleKey()]}`"
@click="deselect(option)"
>
<i class="ri-close-line"></i></button
></span>
</template>
I believe this is the same problem discussed here: https://github.com/sagalbot/vue-select/issues/1311 Is it possible to apply the suggested change?