-
Notifications
You must be signed in to change notification settings - Fork 408
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
Auto-highlight only option #77
Comments
This is probably not something I'd want to add, for a couple reasons. First, in the single-selection case, this functionality essentially already exists via hinting and pressing either tab or the right arrow key to autocomplete. Second, I don't think it's common or expected behavior in a typeahead. Typically, hitting 'enter' when partial text has been typed would trigger an operation based on that text alone. For example, when I do the following Google search, hitting 'enter' will search for 'where' not 'where am i': Furthermore, this component is based on Twitter's Typeahead.js, which is in turn based on their own search functionality and behavior. Given that the functionality you describe is not reflected in the library, I take it as a further sign that it's not canonical behavior. The one case where I could see this potentially being valid behavior is if the |
Fair point, it should not be part of the standard behaviour. |
I'm starting to look at ways I might pull some of these behaviors out into higher-order components to separate them from the rendering piece. This could potentially provide a way to expose a public API for customizing behaviors. Probably not something that's coming in the immediate future, though. |
What are your thoughts on whether it's canonical behavior to hit the ENTER key to select a value when it is the last option in the list? Would it be possible to implement that with the current api? |
It seems reasonable to auto-highlight a selection if it's the only option, which would then allow the user to hit enter to select it. |
In case it's helpful to anyone or if anyone has a better idea, here's how we implemented that:
|
+1 for that feature. This is quite common functionality for autocomplete controls. Since there is no customizable autocomplete tokenizer I found yet, I think that would be nice to have some boolean property 'autocomplete' which enables first option selection on enter pressed. You can find similar behavior when selecting users from predefined list. For example while sharing some note in https://keep.google.com. |
Thanks @daschi, that was very helpful!
I call this from I wrap my Typeahead in a div like this:
And here is saveTypeahead:
|
@mvolkmann This is great. I was able to just make a |
This is how I solved it for a Typeahead that has multiple: true and allowNew: true. It is not tested for any other combination of these props and will with a high chance break.
One thing I like to add. It is mandatory to put the handling of the ativeIdex/activeItem into the componentDidUpdate hook, cause the onInputChange gets fired before the result processing takes place. I am not sure about race-conditions, but I heavily tested it and I had no problems so far. |
|
It would be handy to select the first value in the dropdown on pressing ENTER even if that value is not selected
The text was updated successfully, but these errors were encountered: