Issue with toolbar button active/inactive state when supplying an onChange handler. #141
Description
There have been a few other issues related to the button state not behaving consistently, but I think they've mostly all been addressed. However, I'm still having an issue where the active button flickers (turns inactive, then active again) on every keypress.
I've narrowed this down to the fact that I have an onChange handler that sets state on a parent component.
MyScreen component:
render () {
<View>
<MyEditor
placeholder="Enter some notes..."
onChange={(text) => {
this.setState({
caption: text, // This setState causes toolbar buttons to flicker.
})
}}
/>
</View>
}MyEditor component:
constructor () {
this._richEditor = React.createRef()
}
render () {
<View>
<RichEditor
ref={this._richEditor}
placeholder={this.props.placeholder}
onChange={this.props.onChange}
/>
<RichToolbar
editor={this._richEditor}
actions={[
actions.setBold,
actions.setItalic,
actions.setStrikethrough,
actions.insertBulletsList,
actions.insertOrderedList,
]}
/>
</View>
}Any thoughts? I need to capture changes to the RichEditor in real-time and use them on a higher component. Thanks!