Allow custom input values

[ccemeraldeyes]

In my project, we want to also allow users to input values that are not returned in the suggestions list. We've instructed our users to save their custom input by hitting enter. However, because onSuggestionSelected calls onKeyDown with the original event and no additional data, we had to resort to using a local variable to track the last value selected so that we could figure out whether the onKeyDown event came from onSuggestionSelected or not.

I think the easiest way to get around this would be to explicitly include the suggestion or null in the params passed to onKeyDown, though I could also see modifying the event object to add this data, or simply adding an additional config parameter to allow this mode.

[drags]

Ran into a similar situation, though I wasn't seeing onSuggestionSelected called when a user pressed enter when the suggestions list was empty. This seems to be intentional since the onSuggestionSelected method is only called if (highlightedSuggestion != null).

I got the desired behavior by:

• wrapping the <AutoSuggest> in a form with a hidden submit
• passing an onSubmit via inputProps
• clearing state[value, suggestions] manually.

Pasting this here in case it helps anyone and to invoke Cunningham's Law for feedback/improvements.

// The method to do the actual work comes in as a prop: this.props.addTag
// We want to call this.props.addTag when _either_ a suggestion is selected or "enter" is struck in the input field

class TagSuggest extends React.Component {

  // snip: constructor and other methods

  onSubmit = (event) => {
    event.preventDefault()                // prevent normal form submission
    this.props.addTag(this.state.value)
    this.setState({
      value: "",
      suggestions: [],
    })
  }

  onSuggestionSelected = (event, {suggestion, suggestionValue}) => {
    event.preventDefault()            // prevent onSubmit from being called
    this.props.addTag(suggestionValue)
    this.setState({
      value: "",
      suggestions: [],
    })
  }

  render() {
    const inputProps = {
      // ...
      onSubmit: this.onSubmit,
    };
    return (
      <form onSubmit={this.onSubmit}>
        <Autosuggest
          // snip: autosuggest props 
        />
        <input type="submit" style={{"display": "none"}} />
      </form>
    );
  }

}