-
-
Notifications
You must be signed in to change notification settings - Fork 1.3k
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
Allow additional keyboard keys to create new tag when using taggable feature #956
Comments
I created a PR for this functionality above. Let me know if this would provide the functionality you need. |
@khamer I think that would work for our use case. |
Nice timing. I'm very interested in this. |
@khamer your PR is pretty close to how I imagined solving this problem. The challenge is that folks have different requirements for how the want the component to respond to input of all types, so I'd like to abstract it a bit higher. #971 adds a new prop: If I have a taggable input, and I want <v-select taggable multiple no-drop :map-keydown="handlers"/> export default {
methods: {
handlers (map, vm) {
const createTag = e => {
e.preventDefault();
vm.typeAheadSelect();
vm.searchEl.focus();
};
return {
...map, // defaults
32: createTag, // space
188: createTag // comma
};
},
},
}; This API does require a bit more knowledge of component inner-workings, but also provides a whole lot of flexibility for all types of use cases. What do you think of this solution? |
thanks @Meekohi – updated to point to the right PR. I'll investigate some shorthand syntax today. |
I'm willing to rework my PR to make it more general. I'm not crazy about the syntax in #971 as it seems like the most common use case would be allowing multiple keys (say, space and enter) to both trigger the same action, and it doesn't seem consistent with vue to me. I'd be more tempted to bubble up the events so that someone who wanted a more general implementation could write something like
If this direction seems useful, I can make a separate PR for comparison. I still think it might be worth providing something like
Let me know your thoughts. |
That is actually the first thing I attempted to solve this problem, and was surprised the events didn't bubble up. Is there someway to bubble up the expected |
I do agree the #971 syntax could be pretty annoying if you want to do something after "any letter" or etc... |
@Meekohi I agree, I wrote the wrong thing - Digging a little more, if we did this, it does seem like we could use custom keycodes like this:
Even supporting this syntax, I still think adding a convenience prop like |
I guess the syntax issue can be solved in some tolerable ways if you generate the mapping object programmatically (using lodash here, but I assume this could be vanilla with some more work): methods: {
handlers (map, vm) {
keyCodes = _.range(49,91) // any letter or number
mappedCodes = _.mapValues(_.keyBy(keyCodes), customFunction => vm.typeAheadSelect)
return {
...map, // defaults
...mappedCodes, // custom
};
},
}
</script> I'm still unclear on whether it's really possible or recommended to bubble up the event with the additional |
So, I think I'm still in favor of #971 as the solution to this. It's significantly more generic, has a workable if imperfect syntax, and doesn't prevent adding in short-hand helpers for common use cases in a later PR just like in #958. @sagalbot any additional help needed to get #971 in a mergeable state? |
Okay - I think this is ready to go. Two new props:
<!-- select on tab, space, return, or comma -->
<v-select :selectOnKeyCodes="[9, 32, 13, 188]" /> |
Looks great to me -- fun docs example with the |
Good call @Meekohi, added that to the docs. Merged and I think I'll be able to get |
Thanks @sagalbot! |
Yep, thanks @sagalbot! I might take a stab at an additional implementation that'd use |
Is your feature request related to a problem? Please describe.
We use the taggable feature to allow our users to enter email addresses to forward invitations to our site to their colleagues. Before moving to Vue.js and vue-select we used jQuery UI which allowed us to configure more than just the Enter key to create new tags.
Describe the solution you'd like
As email addresses do not contain spaces we would like our users to be able to hit the Space key to trigger new tags being created, not just the enter key.
Describe alternatives you've considered
I am reluctant to move back to jQuery within our vue spa
Additional context
Can you add a way of specifying a list of which keys trigger a new tag creation, defaulting to current Enter
The text was updated successfully, but these errors were encountered: