behavior of up&down keys

Currently when the user moves up and down with the arrow keys a onChange is triggered. If the user hit enter an handleSelect is triggered. But if the user hit tab the list of autocompleteItems is cleared, the input field stay with the tabbed entry and nothing is selected. I think this is the wrong behavior, if the user hit tab is a select and handleSelect should be triggered. Or this behavior should be configurable.

Because if the user moves up and down, he is browsing, and he doesn’t necessarily wants to select anything, if he wants to select something from the list he start moving up and down… And then hit enter, or tab… If he is not happy with any suggestion and just want to leave the input field filled with what he typed earlier he should be able to do so, but currently whatever he does he can’t revert to its typing. Because esc will clear the suggestions but will leave the field with the last entry he browsed, if he hit tab the same will happen.

That would be consistent with the behavior of google search box, if you hit esc you revert the input field to your last typed text, if you hit tab you select. This is already covered by #77 but I can see for some reasons is not merged.

But still I think something should be configurable, because we don’t necessarily want the up and down to trigger an onChange, sometimes you want the user to see the list of suggestion in the form of establishment name + address but maybe we want to keep/use only the address or only the establishment name. There should be some mean of choosing what happen when the user moves up and down, it would be enough to pass a second parameter to onChange signaling if it’s triggered by user typing or browsing the list.

[hibiken]

@max-favilli Thank you for this! I agree, google search box (also, search box in Google Maps) is a good example to follow.

I took away a few points from your explanation

• Pressing esc key should 1) Clear dropdown 2) Revert to last typed in text.
• Pressing tab key should 1) Clear dropdown 2) Select the highlighted item (if any)

As for 2) in tab key handler, maybe we should allow this to be configurable via prop.

Also, I took a look at Airbnb’s location dropdown, and it has different behavior than Google Maps. I’m open to any suggestions. The library should be flexible but too many options might be confusing for the developer using the library. We need good defaults. I’m happy to make this change, let me know your thoughts @max-favilli 👍

[grothier]

Hi ! @kenny-hibino I agree too, this would be great if we could use tab to actually select a value !