After selecting item on Typeahead, onChange callback triggered twice.

Version

2.4.0

Steps to reproduce

Add Typeahead component which looks like this

<Typeahead
  onChange={(selected) => {
    this.setState({selected});
  }}
  options={['one', 'two']}
  selected={this.state.selected}
/>

Breakpoint inside on onChange Select any item

Expected Behavior

onChange callback hitted once

Actual Behavior

onChange callback hitted twice

Notes

It looks like first call is comming from typeaheadInputContainer.js. Whenever user selects item, _handleChange for Input got executed, which triggers this.props.onChange(...). Second call is comming from typeaheadContainer.js because selected prop is updated, which triggers componentWillReceiveProps(...) -> this._updateText(...) -> this.props.onInputChange(...) -> this.props.onChange()

[vudodov]

I’m agree with @coolkev on his last comment in #305

onChange events should really not be raised in the componentWillReceiveProps event

[ericgio]

Thanks for the report. Sounds like the behavior described in #305. It’s the expected behavior as written, but is unexpected compared to how typical form elements work. Seems like I need to rethink a bit how and where onChange and onInputChange are being called.