react-bootstrap-typeahead icon indicating copy to clipboard operation
react-bootstrap-typeahead copied to clipboard

Allow `highlightOnlyResult` and `selectHintOnEnter` with custom tags

Open jipis opened this issue 5 years ago • 3 comments

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?

jipis avatar Dec 04 '19 17:12 jipis

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.

ericgio avatar Mar 22 '20 20:03 ericgio

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.

ericgio avatar Mar 27 '20 16:03 ericgio

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.

rally25rs avatar Oct 16 '20 17:10 rally25rs