Vue-select: Loosing existing selection when adding options not in list

[papakay]

Describe the bug
I have a block of code as below

<v-select
                    taggable
                    multiple
                    label="name"
                    id="keyword"
                    name="keyword"
                    v-validate="''"
                    data-vv-as="Skills"
                    v-model="search"
                    @search="getSkills"
                    :options="skills"
                    :reduce="skill => skill.name"
                    :create-option="skill => ({name: skill, description: null, id: null, slug: null, createdAt: null, updatedAt: null})"
                    placeholder="Select or enter your keywords"
                  >

                    <template slot="no-options">Type to search for keywords</template>
                  </v-select>

Everything works when when i select from the list of returned options, however i loose existing when immediately I try to add an option not in list.

Screenshots
Before adding option not in list

After Adding option not in list

Desktop (please complete the following information):

• OS: macOs Catalina
• Browser: Chrome
• Version: 80.0.3987.132 (Official Build) (64-bit)

[kamerat]

I have the same issue. In my case, it seems like the component does not run my custom create-option function: :create-option="name => ({ fullName: name, id: -1 })".

It does not return like the create-option tells it to.

Expected result:

[
 [0]: { fullName: 'John Doe', id: 2 },
 [1]: { fullName: 'myCreateOptionItem', id: -1 }
]

//... 
selectedValue: -1

Actual result:

[
 [0]: { fullName: 'John Doe', id: 2 },
 [1]: 'myCreateOptionItem',
]

//... 
selectedValue: undefined

You can see this in this provided CodePen example
It works by selecting the existing ones, but If you add a custom one, it does not work.

This issue is not affected in v3.7.0, so probably a break in 3.7.1

[kamerat]

Locking your version to 3.7.0 solves this issue temporarily @papakay
_package.json_
"vue-select": "3.7.0"

[sagalbot]

Reduce works by taking the 'reduced' value, and finding the complete object within the options list. There's an internal method findOptionFromReducedValue that loops the options and tracks down the original.

I haven't tracked down what changed so that this started happening (I assume it has to do with the comparison changing to getOptionKey), but I've figured out a patch and should be able to get it out later today.

• [x] delete maybePushTags, always push and track them
• [x] findOptionFromReducedValue checks pushedTags and options
• [x] modify optionList to conditionally concat pushedTags if pushTags is true
• [x] add regression test

[kamerat]

You are the hero we deserve 🎖

[papakay]

I appreciate your great work @sagalbot

[sagalbot]

Duplicate #993

[sagalbot]

I have a fix for this ready to go, but there's an issue caused when create-option doesn't return a
value that will be unique when passed to reduce.

https://github.com/sagalbot/vue-select/pull/1091#issuecomment-596700873

      <v-select
        v-model="selected"
        :options="[]"
        label="label"
        taggable
        push-tags
        :reduce="name => name.value"
        :create-option="label => ({ label, value: -1 })"
      />

@BlitZz96 you'd get bit by this issue in your example.

Now that I'm typing this out I might have a solution...

1. findOptionFromReducedValue uses .filter() instead of .find()
2. if the length of the array returned is 1, just return that value
3. if the length of the array is > 1, compare the stringified return values against the pushedTags with .find().

That should give you the correct value, and then it doesn't matter if create-option generates unique reduced values. Can take a crack at that later today.

[github-actions[bot]]

:tada: This issue has been resolved in version 3.8.1 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket:

[sagalbot]

This one should be solved. Let me know if you run into any issues! 🎉

[kamerat]

Thank you for your time @sagalbot. I figured I did not need push-tags after all, so this fix works perfect. I really appreciate your time fixing this. You should set up a patreon for the project. 💵

[sagalbot]

@BlitZz96 happy to help!

I'm signed up for GitHub sponsors https://github.com/sponsors/sagalbot, but I haven't advertised it much. Definitely need to advertise a bit more – I think I'll add the link to the automated release comment, as well as the docs and readme 👍