sagalbot / vue-select

Everything you wish the HTML <select> element could do, wrapped up into a lightweight, extensible Vue component.
https://vue-select.org
MIT License
4.63k stars 1.34k forks source link

selected-option-container slot loses deselectButtons ref #1790

Open erikas-tranauskas opened 1 year ago

erikas-tranauskas commented 1 year ago

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>
erikas-tranauskas commented 1 year ago

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?