javascriptreactjsonblur

react-quill onBlur not working


I am using react-quill as a rich text editor in a react app.

I have to store the text-editor's content in local React state, and only send the value up to Redux 'onBlur'. My issue is that onBlur won't work when, after having focus, you click buttons outside of the text-editor. (I.e., onBlur works when clicking non-interactive elements on the screen, but it won't work when clicking a "save" button).

Current code:

    class TextEditor extends React.Component {
        constructor(props) {
            super(props)
            this.state={
                content: this.props.content;
            }
            this.handleQuillEditor_change = this.handleQuillEditor_change.bind(this)
            this.handleQuillEditor_update = this.handleQuillEditor_update.bind(this)
        }

        handleQuillEditor_change (value) {
            // handleChange...
        }

        handleQuillEditor_update () {
           console.log('blur activated!')
        }


        render() {
            const cmsProps = this.props.cmsProps
            return (
                <div style={containerStyle}>

                      <ReactQuill value={this.state.content}
                                  onChange={this.handleQuillEditor_change} 
                                  onBlur={this.handleQuillEditor_update}/>

               </div>
            )           
        }
    }

Solution

  • My quick-fix: move the blur handler to the container div of the QuillComponent, like so:

                <div style={containerStyle} onBlur={this.handleQuillEditor_update}>
    
                      <ReactQuill value={this.state.content}
                                  onChange={this.handleQuillEditor_change} />
    
               </div>