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>
            )           
        }
    }

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>
            )           
        }
    }

• javascript
• reactjs
• onblur

3 Answers 3

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>

I have been running through same error and i fixed it with this bunch of code.

<ReactQuill
    onChange={(newValue, delta, source) => {
                if (source === 'user') {
                  input.onChange(newValue);
                 }}}
    onBlur={(range, source, quill) => {
            input.onBlur(quill.getHTML());
           }}
 />

Try this piece of code:

const handleBlur = (value: string) => {}

return (
  <Quill
    onBlur={(range, source, quill) => {
       handleBlur(quill.getHTML())
    }}
/>
)