vue-select icon indicating copy to clipboard operation
vue-select copied to clipboard

Auto Select onblur for taggable and pushtags

Open nonsocode opened this issue 6 years ago • 3 comments

When taggable or pushtags is used, the item type in should be pushed into the selected items.

Use Case When a user is typing into the select and the item is not listed, the default behavior is that the user should hit the enter key to add the item to the list. but this is not very intuitive for many users. this should happen automatically on blur.

nonsocode avatar Mar 15 '18 13:03 nonsocode

I think this happens on multiple also.

Or.. it should clear the text on blur to let user know that he/she forgot to push enter and value wasn't entered. Leaving the text there is bad from UX point of view.

soichih avatar Nov 26 '18 20:11 soichih

Total agree that this is a UX improvement. For anyone else looking for a quick workaround, you can use the search:blur emit to force the input to 'select'. Risky code as it might change in future releases, use at your own risk!


<template>

    <v-select no-drop taggable multiple @search:blur="blur()" ref="emailsInput"/>.....


</template>

...

methods: {
blur: function(e) {
    this.$refs.emailsInput.typeAheadSelect();			  	  
 }
}

**Note this is a quick fix for a single input, could probably do a loop on the $refs array to do this for any v-select component.

mofolo avatar Jul 30 '20 13:07 mofolo

Hi, @sagalbot Any updates on this feature? Is it implemented? OR any plan to implement? Thanks.

aniket-kale avatar Nov 29 '21 11:11 aniket-kale