React-quill: Paste something will trigger the blur event.

[BowlingX]

Hi,
If you paste something, the onBlur event is triggered immediately. It will then not fire after you clicked outside.

Example:
https://codepen.io/anon/pen/qPVQGK?editors=0010#0

1. Paste something
2. See how the alert shows up onBlur
3. click outside (expect the alert box to show, will not show)

React-Quill version

• [ ] master
• [ ] 0.4.1
• [ ] 1.0.0-beta-1
• [ ] 1.0.0-beta-2
• [ ] 1.0.0-beta-3
• [ ] 1.0.0-beta-4
• [ ] 1.0.0-beta-5
• [ ] 1.0.0-rc-1
• [ ] 1.0.0-rc-2
• [ ] 1.0.0-rc-3
• [ ] 1.0.0
• [x] 1.1.0
• [ ] Other (fork)

[paulupendo]

@BowlingX @alexkrolick Hi, what is the proposed solution for this?

[chops318]

I'm looking into this now, it seems when you paste a value into the editor, the range is set to null, rather than a new Range...and onEditorChangeSelection is not called again

[chops318]

So I narrowed it down to the clipboard's onPaste event in Quill.js, this line specifically

this.quill.updateContents(delta, Quill.sources.USER);
After this is called, the editor loses focus and the onBlur event is called in react-quill. I'm not really sure how you could fix this behavior without maybe adding an onPaste event to react-quill. Any maintainers have any thought?

[alexkrolick]

cc @jhchen (Quill maintainer)

• http://quilljs.com/docs/api/#selection-change
• https://github.com/quilljs/quill/issues/1680

Detecting null selection-change events is the recommended way to detect focus changes in Quill and this is the heuristic React-Quill uses to call the onBlur prop. It sounds like this causes some false positives with paste and possibly other events.

[luofei2011]

I met the same problem when i paste something into editor, and trigger onBlur event immediately.

This is my solution:

<ReactQuill
  ref="editor"
  onBlur={this.handleQuillBlur}
  ...
/>

handleQuillBlur = (range, source, editor) => {
  setTimeout(() => {
    let fixRange = editor.getSelection();
    if (fixRange) {
      // get the editor instance.
      let editorInstance = this.refs.editor.getEditor();
      editorInstance.setContents(editorInstance.getContents());
      editorInstance.setSelection(fixRange);
      //editorInstance.focus();
    }
    // it's true blur.
    else {
      // do something.
    }
  }, 100); // 100ms is random...
}

[natterstefan]

Hi @alexkrolick, did you have the chance to invest some time into this issue or get some feedback from @jhchen? I am currently struggling with this issue as well. @luofei2011's solution is worth a try, but feels more like a workaround than an actual fix. Maybe you have some news for me/us.

Thanks for your help and time. :)

Copy & Paste onBlur and onFocus issue

@luofei2011: My problem is the following (and it does not work with your solution ... :/ ): We want to hide the toolbar (via css, so no toolbar=false issue) when the editor lost it's focus. And only show it again when the Editor is focused again.

But the following happens. When the user enters quill (onFocus) he can start typing. Then he copy & pastes something (for some reason onBlur is then triggered). I can still copy & paste but the toolbar does not appear again. Only when I type again.

===> Check out the examples below for a live demo.

Main Research

But it should work, because here is a working solution from quill (not react-quill's implementation): https://codepen.io/DmitrySkripkin/pen/eeXpZB?editors=0010#0. I found it here, it was also mentioned by @alexkrolick previously.

I am not entirely sure, but maybe the issue is here somewhere. Maybe @zenoamaro can help us out here?

Some other links

• ~Next thing I try is onPaste. I will keep you posted here in this comment.~ ==> Update: did not work, as there is no such function.
• ~Btw I also stumbled upon this comment and where they are talking about an issue related to an React 16.~ ==> Update: I was not able to get the same result/issue. See my working 16.2 example below.
• It looks like quill has some onBlur issues in general, eg: "Clicking the quill toolbar is detected as blur event"

---

Examples

I have created some examples here:

• React 15.6: https://codepen.io/natterstefan/pen/YLpyYZ?editors=0010
• React 16.2: https://codepen.io/natterstefan/pen/ELNKKR?editors=0010

[vinay72]

this.handleChange = this.handleChange.bind(null)
This will solve you this issue.

[luofei2011]

@natterstefan maybe you used wrong way, https://codepen.io/anon/pen/zJeEXV?editors=0010 is ok.
@vinay72 .bind(null) changed the this to null, calling this.setState will trigger error.

[vinay72]

Okkay I got it .

[kadamska]

You can try storing a ref to the ReactQuill component and focus()ing it after the change. Looks like it prevents de-focusing after pasting (this.editor is a ref):

handleContentChange = (content) => {
   // do something with new content
   this.editor.current.focus();
}

Of course, this may not work for cases where you need blur() with content change.

[shaayaansayed]

@natterstefan were you able to fix the paste blur issue?

[natterstefan]

Hi @shaayaansayed, to be honest, we decided to use a different approach in the UI, which lead to not touching this issue again. But, as far as I can see from the previous comments this one looks promising: https://github.com/zenoamaro/react-quill/issues/276#issuecomment-423184803.

[luke-robertson]

following @luofei2011 example this works for me :

onBlur={(range, source, editor) => {
              setTimeout(() => {
                let fixRange = editor.getSelection()
                if (fixRange) {
                  // paste event or none real blur event
                  console.log('fake blur')
                } else {
                  console.log('real blur')
                }
              }, 50) // random time
            }}

[TheSohaibAhmed]

Has anyone considered attempting to re-focus after paste (command/ctrl + V)? It looks like the first paste is perfectly fine - the textarea blurs on second paste. I'm cautious that this could lead to performance throttling. Thoughts?

[PatrickDesign]

Has anyone considered attempting to re-focus after paste (command/ctrl + V)? It looks like the first paste is perfectly fine - the textarea blurs on second paste. I'm cautious that this could lead to performance throttling. Thoughts?

I have implemented the re-focus approach. I haven't noticed any slowdowns 🙌