onKeyDown handler about react-bootstrap-typeahead HOT 9 CLOSED

Here's a simple example:

const MyForm = React.createClass({
  getIntialState() {
    return (
      selected: [],
    );
  },

  render() {
    return (
      <form>
        <Typeahead
          onChange={(selected) => this.setState({selected})}
          options={this.props.options}
          selected={this.state.selected}
        />
        <button onClick={this.handleFormSubmission}>
          Submit
        </button>
      </form>
    );
  },

  handleFormSubmission() {
    // When the user hits enter, do whatever form submission you need to do here.
    // The typeahead's value is available in `this.state.selected`.
  }
});

from react-bootstrap-typeahead.

Not sure I'm understanding correctly, but I think you're describing a case where the typeahead is part of a form, and some save action is called when the user clicks a "Save" button, or hits enter to submit the form, is that right?

from react-bootstrap-typeahead.

Yes, that's correct. How about something like this at the end of Typeahead.react.js _handleKeydown method:
if (!this.state.showMenu) { this.props.onKeyDown && this.props.onKeyDown(e) }

from react-bootstrap-typeahead.

The typeahead shouldn't need to be aware of if and when your form is submitted. Instead, it's the form's job to be aware of changes to the value of the typeahead (and any other input) and update the data it will send accordingly. Use the typeahead's onChange prop to register changes in value.

from react-bootstrap-typeahead.

The onChange prop only gives me the selected value, but I want to detect when the user hits 'Enter' after the input field has been filled in and then trigger the form submit/action. I can not detect user hitting 'Enter' without having an onKeyDown hook.

from react-bootstrap-typeahead.

When you're talking about the user hitting "Enter," do you mean when the typeahead option is selected, or once the option is selected, an additional user action where the user submits the form?

from react-bootstrap-typeahead.

Once the option is selected and then an additional user action to submit the form.

from react-bootstrap-typeahead.

The typeahead's parent is the appropriate place to handle the "Enter" action, since it is aware of both the submission event as well as the typeahead's value.

from react-bootstrap-typeahead.

ahh, right, thank you, that will do the trick instead of trying to detect it myself in code.

from react-bootstrap-typeahead.