createOption always prepends option to optionsList

[fkranenburg]

When our users are searching in a large dataset, we allow new data input via createOption function. (taggable) But the new tag is always prepended in the result list, instead of appended.

Describe the solution you'd like A number of options are possible:

• A new prop for adding instead of prepending new options to the list
• A way to implement custom sorting of search results including created options
• A new slot with the ability to customize the complete resultset, for example: <template #all-options="{options, selectable,onselect,classname, searching, loading }">

Describe alternatives you've considered I tried to filter the options myself via filter property but this did not work.

Additional context Our options that are added via createOption function are shown in the list like: You searched for 'test', click here to add 'test' to the list... Where 'test' is the search keyword.

[jonalxh]

Have you solved it?

[BarryPSmith]

I have the same issue. I 'solved' it by extending the component, and overrode the filteredOptions computed property, based on the source code, changing the unshift to push

(It was worth it for me to override the component because I modify a bunch of the default behaviours. The code below shows only the relevant part)

<script>
import vSelect from 'vue-select';
/*
 vue-select doesn't quite give the behaviour we desire.
*/
export default {
    extends: vSelect,
    name: "vSelect",
    computed: {
        filteredOptions() {
            const optionList = [].concat(this.optionList);
            if (!this.filterable && !this.taggable) {
                return optionList;
            }
            let options = this.search.length ? this.filter(optionList, this.search, this) : optionList;
            if (this.taggable && this.search.length) {
                const createdOption = this.createOption(this.search);
                if (!this.optionExists(createdOption)) {
                    options.push(createdOption);
                }
            }
            return options;
        },
    }

}
</script>

[Tyler-RCSD]

Had the same issue in my deployment. Would love to see a prop that allows you to change between append or prepend but @BarryPSmith solution will work for me.

[gnuletik]

@sagalbot I can make a PR to solve this issue if you're OK for this feature.