shentao / vue-multiselect

Universal select/multiselect/tagging component for Vue.js
https://vue-multiselect.js.org/
MIT License
6.72k stars 989 forks source link

Unable to deselect an option using onclick remove with multiple and searchable enabled, and tag and selection slots used #1552

Open cyrorama opened 2 years ago

cyrorama commented 2 years ago

Reproduction Link

https://jsfiddle.net/zcm1p9jo/5/

Steps to reproduce

  1. Use Multiselect with :multiple and :searchable set to true
  2. Use the selection slot to display the count of options selected instead of showing the selected tags
  3. Use the tag slot to change how tags are displayed and use remove with onClick
  4. Select several options
  5. When the selection is open, attempt to click on X to de-select an option.

If you set :searchable to false, then clicking on X de-selects an option.

Here's the main code snippet, which is also within the reproduction link above.

Multiselect:

    <Multiselect
      v-model="value"
      :options="options"
      :multiple="true"
      :searchable="true"
      placeholder="Pick some"
      label="name"
      track-by="name"
    >
      <template
        #selection="{ values, isOpen }"
      >
        <span
          v-if="values.length && !isOpen"
        >
          {{ values.length }}
        </span>
      </template>
      <template #tag="{option, remove}">
        <div>
          <span
            @click="remove(option)"
            >X</span>
          {{ option.name }}
        </div>
      </template>
    </Multiselect>

Expected behaviour

After selecting several options, I should be able to click on X within a selected tag to de-select.

Actual behaviour

Clicking on X does nothing. I am still able to de-select within the dropdown.

mattelen commented 1 year ago

After some lengthy investigation, I've figured out what is going on here.

When the dropdown is open, the tag slot is showing. When you click on the X, the dropdown actually closes and reopens itself. This means the tag slot is removed from the dom, the selection slot shows, then the tag slot is shown again. As part of this, I don't think the click event reaches the intended method, so it doesn't fire.

So, this isn't ideal. However, due to workarounds and specific-ness of the issue, and that I don't think this is a quick/simple fix, I'm not so keen to spend any more time of this for this next round of releases. I'll leave the issue open so when we have more time we can re-evaluate this.