Vue-select: How to push tag on blur ?

[davidalvarezr]

I managed to prevent the search text to disappear using the clearSearchOnBlur prop, but when the user clicks out of the search input, the text that he typed is not pushed onto pushedTags (I have the taggable option set to true). Is there a way to push the tag when the user clicks out of the search input ? If not, it would be a great feature

[LMCom]

I came here because of the exact same problem. I thought it was a very common use-case and googled first. There are a lot of other select boxes that allow entering a free text, which is then accepted as the current value of the select box. What we are trying to do is to reproduce this behaviour with the properties that are available on vue-select. I came as far as you and used taggable and clearSearchOnBlur.

[LMCom]

I got it. There were some hurdles due to the implementation (seperate pushed tags, computed property listOptions).

Add these methods:

            addSearchOnBlur() {
                const select = this.$refs.mySelect
                const newOption = {id: select.search, name: select.search }

                if(!select.search) {
                    return false
                }

                select.select(newOption)

                return false
            },
            onOptionCreated(pushTagFunction) {
                const select = this.$refs.mySelect
                pushTagFunction({id: select.search, name: select.search});
            }

Add these props:

:taggable="true"
:push-tags="true"
:clear-search-on-blur="addSearchOnBlur"
@option-created="onOptionCreated"

The event option-created passes the function pushTag (and sadly nothing else to work with). You have to call this function with the data that should be your pushed tag. It is dynamically inserted when rendering the options.

Passing a manipulated options prop led to an error, because of duplicate keys (I made sure, there were no duplicate keys in my options). I guess it has something to do with the way listOptions is computed.

The drawback with the current solution: pushed tags are added to the end of the listed options. So the user does not necessarily notice, that his/her input was added.

@sagalbot The documentation on option-created is outdated/wrong. https://vue-select.org/api/events.html#option-created

[zumoshi]

Thanks for the workaround, it worked. But this is way too convoluted to get the desired behavior.

One could argue that this is outside the scope of a "select" component, as was done in vuetify#5733. Instead, suggesting an alternative such as trevoreyre/autocomplete for this use-case,

But given that vue-select is not part of a bigger framework with existing alternatives for the auto-completion use case to overlap with and with how close it already comes to accomplishing it, I think it may be worth it to add an option for this.

Something along the lines of :autocompelable="true" which would change the behavior to mostly that of input with suggestions. Or just tagOnBlur that would simulate the workaround above.