Skip to content
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 highlightOnlyResult and selectHintOnEnter with custom tags #505

Open
jipis opened this issue Dec 4, 2019 · 3 comments
Open

Allow highlightOnlyResult and selectHintOnEnter with custom tags #505

jipis opened this issue Dec 4, 2019 · 3 comments

Comments

@jipis
Copy link

jipis commented Dec 4, 2019

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?

@ericgio ericgio changed the title Allow highlightOnlyResult with allowNew for new entries Allow highlightOnlyResult and selectHintOnEnter with custom tags Mar 22, 2020
@ericgio
Copy link
Owner

ericgio commented Mar 22, 2020

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
Copy link
Owner

ericgio commented Mar 27, 2020

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.

@rally25rs
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants