Skip to content

Auto Select onblur for taggable and pushtags #486

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
nonsocode opened this issue Mar 15, 2018 · 3 comments
Open

Auto Select onblur for taggable and pushtags #486

nonsocode opened this issue Mar 15, 2018 · 3 comments
Labels
tagging Relates to the `taggable` prop UX

Comments

@nonsocode
Copy link

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.

@soichih
Copy link

soichih commented Nov 26, 2018

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.

@sagalbot sagalbot added tagging Relates to the `taggable` prop UX labels Nov 7, 2019
@mofolo
Copy link

mofolo commented Jul 30, 2020

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.

@aniket-kale
Copy link

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

@nonsocode nonsocode reopened this Nov 29, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
tagging Relates to the `taggable` prop UX
Projects
None yet
Development

No branches or pull requests

5 participants