react-bootstrap-typeahead
react-bootstrap-typeahead copied to clipboard
Allow `highlightOnlyResult` and `selectHintOnEnter` with custom tags
The short version is to let highlightOnlyResult work with allowNew -- especially for the new entry.
I'm creating tags. There's a list of existing tags that I've prepopulated into the options. But, I also want to allow new tags to be created with allowNew. I want the user to be able to use the ENTER key to select the (existing) tag that he's started to type. Using selectHintOnEnter does a good enough job for this. But, if the user wants to add what he's typed as a new tag, he can't just ENTER.
I think that this is normal behavior in other places. I feel like the "standard tag interface" (if there is such a thing) works this way. Type - ENTER - type - ENTER - type - ENTER. If the tag already exists, great. If not, still great. Right?
Similar request in #526. I made the decision to disable those props when using custom option a long time ago, and I honestly can't remember why. At first glance, it seems reasonable to allow both, though there may have been some deeper issue with that. I'd have to take another look.
For the selectHintOnEnter case, the custom option is always an exact match of what the user has entered in the input, so there's no autocompletion happening, and therefore no hint. In that case, allowing selectHintOnEnter would essentially function the same way as highlightOnlyResult, but without the highlighting.
For those coming across this from a search looking for the functionality described and seeing that selectHintOnEnter has been deprecated, you can do:
<Typeahead
inputProps={{
shouldSelectHint: (shouldSelect, e) => {
return e.keyCode === 13 || shouldSelect;
},
}}
/>
However this will only work for items matched in the array of known items, not for accepting any entered text as a new item when allowNew={true}. It'd be great to have a way for the enter key to also accept the current input as a new tag for the allowNew case when there is no hint (which is what #526 was requesting) but I haven't seen a simple way to achieve that yet.