React-autosuggest: Feature request: handle input submission without autocomplete

[octplane]

Hello,

I'm using your very nice component in a dictionary application. I'm trying to have the following behavior to the search field:

• let the user type anything in the search box and press enter at anytime: this should route to a search result page. During these key presses, the auto complete can display and be used as described here:
• otherwise, the user can navigate into the autocomplete list and select and press return on the focused entry: this should route to a precise entry page (this behavior is already implemented)

I've tried intercepting the enter key in the input to navigate to the search page but the enter event is also fired when the user selects a completion. I tried cancelling event and many other kludges to no avail.

Is this behavior a achievable?

[moroshko]

Would wrapping Autosuggest in a <form> and attaching onSubmit to it solve your issue?

[octplane]

Indeed. I had forgotten all this was just some html. I works perfectly. Thanks!

[scotta-koorong]

I know this has been closed, but if anyone else wants to do this, you may run into an issue depending on how complicated your implementation is.

If you begin typing, retrieve some suggestions, use the arrow keys to select a suggestion, and press enter to select that item, you will end up firing two events in competition:

• One based on the submit action in the form
• One based on the onSuggestionSelected function

The problem can arise if you're using onSuggestionSelected to get a deeper value, such as going to a url associated with the suggestion but the other event is just trying to fire whatever is in the input field.

I solved this by making it so the input field was locked off when the user was selecting with the keyboard. It was a messy implementation.

[octplane]

In my case, I had to preventDefault the event in the onSubmit and onSuggestionSelected to accomplish the behavior I wanted.