Vue-select: Clicking the option I've previously selected clears the select

[sergiocastrovale]

Whenever I click the same option that was selected before, vue-select clears the selection, which is a behavior you rarely see in a real select tag (and breaks my app as an option is always required).

The more common behavior would be ... nothing happening if I clicked the same thing I had selected before.

Is there any way to solve this?

[shidqon]

same here.
also when use prop ':on-change' somehow the model can't update the value

[Diathedia]

Apparently when you press backspace it also clears the select2. If anyone found a prevention it'll be much appreciated.

[mrdoinel]

In the original select2 library, there is an option called 'allowClear' (which is set to false by default) to allow you to clear the select when clicking a selected option : https://select2.org/selections#clearable-selections

I guess we could mimic this behavior.

[glennpeters]

I'm getting this issue, too. I tried :clearSearchOnSelect="false" with no effect.

[NanoDev777]

someone found the solution to this problem?

[sagalbot]

Fixed in #436.

Will be added in v2.5.0 with a bunch of other new features. After #423 is merged, I'll tag a new release, likely this weekend.

---

@shidqon use @input instead. The default on-change callback emits the input event that wires up the v-model syntax. If you overwrite on-change, you lose v-model. Will be deprecating on-change with v2.5.0.

[NanoDev777]

@sagalbot I will look forward to the last update, hopefully this weekend, thank you very much.

[LeKristapino]

After trying code from master branch it seems that the deselecting problem persists.

[sagalbot]

@LeKristapino can you provide steps to reproduce? The call to deselect was removed entirely from the select method as of #436. select is called whenever an option is clicked from the list. Here's the method as of cd53e5d1c4f271690ee13622603b9bc274993109:

/**
 * Select a given option.
 * @param  {Object|String} option
 * @return {void}
 */
select(option) {
  if (!this.isOptionSelected(option)) {
    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)
}

[LeKristapino]

@sagalbot Maybe I did something wrong trying to run master code (Sorry, it was the first time running npm package from a fork). As I understand you will bump up the version number soon? So I will just wait for the new version

[enterlight]

Same thing here. I installed commit #e35e2ac and did not see any changes in the behavior of the v-select. I made sure I had the code you mentioned above.

This is what I have:

                <v-select
                        placeholder="Select Credential Type"
                        v-if="modelTypesLoaded"
                        v-model="selectedModelType"
                        label="name"
                        :filterable="false"
                        :options="modelTypes">
                </v-select>

Initially

vm.modelTypes = [];
vm.selectedModelType = null;

and then after an Ajax call, modelTypes becomes

vm.modelTypes = [
{
name:"Provider",
type:"type1"
},
{
name:"Locations",
type:"type2"
}
];

Initially none of the option are selected. If I select Provider, then Provider gets selected. If I click on the v-select to expand and select Provider again, it gets deselected.

[sagalbot]

@enterlight the most important piece of the code here is how you're import vue-select. The /dist is only compiled on releases, so if you're using import vSelect from 'vue-select', you're going to be using the last release, not the latest version of the code.

You'll need to dive into node_modules directly:

import vSelect from 'path/to/node_modules/vue-select/src/components/Select.vue'

Note that none of this code is transpiled, you'll need to be using babel.

[LeKristapino]

@sagalbot When could you release the 2.5.0 version? I would really like to ship this functionality to production As soon as possible.

[annelbco]

^ Like above. Having issues with reselecting the previous option triggers the validation. Hope this gets out in the wild not sooner.

[mwleinad]

is there any ETA on this?

[cristianpoleyJS]

+1

[erezger]

when v2.5.0 will be realease

[whitesunset]

Bumping this issue. When 2.5.0?

[sergiocastrovale]

Guys, this issue is a year old. It doesn't make sense to rely on a package that takes a year to update something like this - I'm not saying the package isn't good, but things like these are fundamental to what's expected of a select element.

You'd be far better off using an alternative. I've migrated to https://vue-multiselect.js.org a long time ago and it's far, far better.

[sagalbot]

This is fixed in v2.5.0, along with many other fixes and new features. Very sorry for the outrageously long delay! I'm getting back into a more reasonable release cycle (lots of changes coming on the vue-cli-3 branch) over the coming weeks.

That said @sergiocastrovale, I really do not appreciate your latest comments. I wish I could have gotten this solved sooner - personal circumstances did not allow for it. I understand your concerns, and I recognize that this is an unreasonable amount of time for an issue like this one to be open - but it is very disheartening to see you actively telling people to stop using this library while letting me know that my work is inferior.

[sergiocastrovale]

@sagalbot I didn't mean to come off that way. I have the utmost respect for people who devote their time to help developers (for free!).

However, I've been receiving emails about this issue for the past year, and it was clearly a huge setback for anyone who used vue-select (the first thing popping up when you search for a select for Vue), so I was just stating the obvious: they would be far better off with an alternative - at least while this didn't work.

That said, I'll be sure to keep following the package and try it myself in an upcoming project. I'm sorry if my semi-rant came off the wrong way. Keep up the good work!