Editable dropdown mode, return code causes label to be lost.

[VAllens]

Describe the bug

I used attributes: taggable, create-option, reduce

Editable dropdown mode, return code causes label to be lost.

When I input ABC by myself and press OK, it will display -1 and return -1

Expected behavior
I expect it to display user input‘s content and return my defined values.
e.g.: user input: ABC, display in the input box: ABC, return -1.

Desktop (please complete the following information):

• OS: [Windows 10 1903]
• Browser [Google Chrome 79.0.3938.0]
• Version [vue-select 3.2.0]

Additional context
My code:

HTML:

<div id="bigDropDownControlApp">
	<div class="form-group">
		<label for="Level">BUG</label>
		<v-select taggable
			v-model="UserData.Level" 
			label="label" 
			:options="SourceData.Level" 
			:create-option="text => ({ label: text, code: -1 })"
			:reduce="item => item.code">
		</v-select>
	</div>
	<div>
		result: {{UserData.Level}}
	</div>
</div>

Javascript:

Vue.component('v-select', VueSelect.VueSelect);
new Vue({
	el: "#bigDropDownControlApp",
	data: {
		UserData:{
			Level:"1"
		},
		SourceData:{
			Level:[
				{
					label:"A",
					code:"1"
				},
				{
					label:"B",
					code:"2"
				}
			]
		}
	}
});

[VAllens]

It only occurs the first time a custom input is made.

[sagalbot]

Thanks for the detailed explanation!

This is a tricky scenario, that really comes down to reduce. When using reduce, the component only stores the result of your reducer, in this case, -1. The other properties are determined by finding the option from the list using the reduced value.

This problem occurs because when you're using taggable + reduce, the component essentially 'throws away' everything except the reduced value. The label isn't displayed, because the component no longer knows what it is.

pushTags should solve this by pushing any new tags to the options list, but it doesn't seem to solve our problem here either, which is likely a bug. This does seem to work however:

      <v-select taggable
                v-model="UserData.Level"
                label="label"
                :options="SourceData.Level"
                :create-option="text => {
                  const option = { label: text, code: -1 };
                  SourceData.Level.push(option)
                  return option;
                }"
                :reduce="item => item.code">
      </v-select>

This is a bit gross, and requires the consumer to know way too much about how vue select works. I'll need some time to fix the underlying issue.

[VAllens]

yep, best wishes. :)
Your components is very nice.
Thank you for your contribution to the Vue community

[github-actions]

🎉 This issue has been resolved in version 3.8.1 🎉

The release is available on:

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

Your semantic-release bot 📦🚀