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
onChange
andonInputChange
are being called.