Vue-select: select same item will set its value to null

[msyesyan]

I see in your documents demo, when you repeat select the same value, the option will not be deselected, but when I use this plugin, it will deselect this same option.

I see in your source code there is a logic if (this.isOptionSelected(option)) this.deselect(option).
I don't want this behavior, I just want to keep the selected option if user select the same option in the dropdown list

[msyesyan]

Can we add a default props(clearOnSelected) to help to skip deselect? for example

      select (option) {
        if (this.isOptionSelected) {
          if (!this.multiple && this.clearOnSelected) {
            this.deselect(option)
          } else {
            return
          }

[alsotang]

+1

[alsotang]

And what is strange is that in https://sagalbot.github.io/vue-select/#install , click the same option would not become null

[msyesyan]

https://github.com/sagalbot/vue-select/pull/194 I have a PR and waiting for merge

[adamwgriffin]

I don't want this behavior either because I have a bug sitting in my queue right now that says I'm supposed to "fix" it. It would be really helpful if that pull request could get merged, or if the author could provide some kind of workaround or something. Thanks.

[emil14]

+1

[sergiocastrovale]

+1 has this been fixed? How can I prevent nulls when I click twice on the same option?

[adi518]

Hah, our QA halt upon this for the exact same reason. This behavior shouldn't be enabled by default IMO.

I dissected @msyesyan PR into an extended component of vue-select as a temporary workaround, which absolves source intervention. I did however, set toggleSelectOption default value to false. Make sure your Vue version supports composition with the extends property.

Edit: added disabled prop as well. You'll need to style it though.

<script>
// ExtendedVueSelect.vue
// https://github.com/sagalbot/vue-select/issues/180
// https://github.com/sagalbot/vue-select/pull/194
import vSelect from 'vue-select'

export default {
  extends: vSelect,
  methods: {
    /**
     * Select a given option.
     * @param  {Object|String} option
     * @return {void}
     */
    select(option) {
      if (this.isOptionSelected(option)) {
        if (this.toggleSelectOption) {
          this.deselect(option)
        }
      } else {
        if (this.taggable && !this.optionExists(option)) {
          option = this.createOption(option)
        }
        if (this.multiple && !this.mutableValue) {
          this.mutableValue = [option]
        } else if (this.multiple) {
          this.mutableValue.push(option)
        } else {
          this.mutableValue = option
        }
      }
      this.onAfterSelect(option)
    },
    /**
     * Toggle the visibility of the dropdown menu.
     * @param  {Event} e
     * @return {void}
     */
    toggleDropdown(e) {
      if (!this.disabled) {
        if (e.target === this.$refs.openIndicator || e.target === this.$refs.search || e.target === this.$refs.toggle || e.target === this.$el) {
          if (this.open) {
            this.$refs.search.blur() // dropdown will close on blur
          } else {
            this.open = true
            this.$refs.search.focus()
          }
        }
      }
    },
  },
  props: {
    /**
     * Enable/Disable deselect the option by double select it
     * @type {Boolean}
     */
    toggleSelectOption: {
      type: Boolean,
      default: false
    },
    /**
     * Enable/Disable
     * @type {Boolean}
     */
    disabled: {
      type: Boolean,
      default: false
    }
  }
}
</script>

[omarjebari]

This issue seems to have crept back in as far as i can see. I'm using vue-select ~2.0.

@input="updateNumAppliances"
class="dropdown"
:options="numAppliancesOptions"
:value="selectedNumAppliances"

If i select the option that is already selected it deselects it and null is passed back to the updateNumAppliances function. Annoying as deselection shouldn't be the default behaviour. Even the example in the documentation behaves in the same way, eg
https://sagalbot.github.io/vue-select/docs/Basics/Options.html#labels

[ropinheiro]

Same here...

[sergiocastrovale]

It's been more than a year guys ... Not complaining about the work put into this package but you'd probably be better off with another package with less UI issues (for instance, vue-multiselect). Far better customization and support.

[Organizm238]

Any fix for this? This is extremely crucial bug.

[tberne]

Waiting for a solution as well.

[const-int]

I added following style to solve this problem:

li.active > a { pointer-events: none; }

[sagalbot]

This is fixed in the latest v.2.5.0 release.