React-autosuggest: How can I track enter button event on text box provided by react-autosuggest?

[ashwintastic]

Are you reporting a bug?

yes

• Please create a Codepen that demonstrates your issue. You can start from the Basic example.
  on presseing enter inputProps.onChange is not executing
• Provide the steps to reproduce the issue, e.g.:
  
  
  
  1. Focus on the input field
  
  
  2. Type c, and wait for suggestions to appear
  
  
  3. Press Escape
  
  

Observed behaviour: Suggestions stay open

Expected behaviour: Suggestions should be closed

Are you making a feature request?

• Please describe your use case from user journey point of view, e.g.:

  In my application, when user highlights suggestions (using the mouse or keyboard), I'd like to display additional information about the highlighted suggestion alongside the Autosuggest.

• If you have ideas how to extend the Autosuggest API to support your new feature, please share!

• If you know any examples online that already implement such functionality, please share a link.

[amalajith]

You can pass the onKeyPress event handler to the input props.

const inputProps = {
            placeholder: 'Search for something...',
            value,
            onChange: this.onChange,
            onKeyPress: this.onKeyPress
        }

and this is how you will use the handler function to check for enter key press

onKeyPress = (e) => {
        if(e.key === 'Enter'){
            //do something
        }
    }

Make sure to pass the inputProps to the <Autosuggest inputProps={inputProps} ...

You can further customise the input component using the renderInputComponent method. I have used React semantic UI input as the input component.

const renderInputComponent = inputProps => (
    <div>
        <Input style={{width: '350px'}} icon='search' {...inputProps} />
    </div>
);

[sshadmand]

Bumping this thread since although evt.key does work, evt.keyCode always returns 0. So thanks for the tip, but there is still an issue with events.

[thomaslc66]

@amalajith Do you know if it is possible to get the all suggestion and not the suggestionValue ?

Because here
onKeyPress = (e) => { if(e.key === 'Enter'){ //do something } }
e will contain the target that will contain the value, but what if i my value are {id: ..., name: ....} and i need to get the id and not the name. Is there a way to get like in the onSuggestionSelected method ?

Thanks