React-autosuggest: onInputSubmitted?

[approots]

I'm wondering how to detect the enter key? If a user doesn't select an available option and types their own content and hits enter, can I capture that somehow? Would another event like onInputSubmitted make sense? This would fire if conditions aren't met for onSuggestionSelected when the enter key is hit.

[acthp]

I just hit the same problem. Tried to bind onKeyDown, but it's overwritten by the component. This is critical.

[donaldparker]

My solution to this was to ensure your component is in a form and listen for the on submit.

[approots]

Thanks donald. I suppose I could live with that. Although there still might be a use case this proposal.

[acthp]

Using a form, aren't you still missing a ref for the input? You'd have to search the DOM for the input element? The value isn't in the event, or exposed by the component, and the refs are hidden.

[approots]

Well, I like to use controlled components. Long story short, I store the value of the input on every change so all I need to know is that the form submitted.

Details about how I would do it: Every time the input changes, the function provided as the property of suggestions is called. In my suggestions handler, I update my state to the value of the input parameter. Then my component rerenders and I pass the current input state value back into autosuggest via the value property.

Having said all that, I decided to fork autosuggest and add my own onInputEnterKey() method so that I don't have to use a form tag.

[moroshko]

Sorry for the late response. Can I ask what is the use case for determining when Enter was pressed?

@acthp As I mentioned here, you could access the input via refs.

[approots]

My use case - I needed to know when a value was submitted and I wasn't surrounding react-autosuggest with form tags. Without the form onSubmit event, I had no way (that I could think of) to know if a value was submitted. I don't have a good answer as to why I didn't use form tags though :)

[moroshko]

Closing this for now as using a form tag does the trick.

[jDeppen]

<form> works but it conflicts with other methods when selecting a suggestion with 'enter'. They happen in this order:

1. onSuggestionSelected method 'enter'
2. onSuggestionsUpdateRequested reason 'enter'
3. form submission

Is it feasible to have onSuggestionsUpdateRequested trigger 'enter' (when no suggestion) rather than using <form>? Especially since onSuggestionSelected already handles 'enter' with a selection.

Thanks

[moroshko]

@jDeppen Sorry, I'm not I understand your issue. Could you create a Codepen that demonstrates the issue?

[jDeppen]

http://codepen.io/jDeppen/pen/MyLLee?editors=0011

[marcusmateus]

Probably a bit late for @jDeppen, but just in case anyone else is seeing the same issue, you can simply call event.preventDefault() in the onSuggestionSelected handler... that will keep the form from being submitted, though onSuggestionsUpdateRequested will still be called.