select same item will set its value to null

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

[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>

[sagalbot]

This is fixed in the latest v.2.5.0 release.