react-bootstrap-typeahead: 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()
About this issue
- Original URL
- State: closed
- Created 6 years ago
- Reactions: 1
- Comments: 20 (9 by maintainers)
Commits related to this issue
- [breaking] Only fire change events on user action (#305, #320) — committed to ericgio/react-bootstrap-typeahead by ericgio 6 years ago
- [breaking] Only fire change events on user action (#305, #320) — committed to ericgio/react-bootstrap-typeahead by ericgio 6 years ago
- Split up hint and activeItem selection logic (#320) — committed to ericgio/react-bootstrap-typeahead by ericgio 6 years ago
I’m agree with @coolkev on his last comment in #305
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
onChangeandonInputChangeare being called.