Missing blur event when button outside of editor is clicked.

[medihack]

trafficstars

When a Quill editor is focused and a (non editor) button on the same page is clicked then the onBlur event is not fired.

Here is an example: https://codepen.io/medihack/pen/KBPEoX

Steps to reproduce:

• Click inside the editor to focus it and make the input cursor show up
• Watch the console and click on the button above the editor
• No onBlur event is fired (at least on Chrome). It is fired when clicking somewhere else.

[medihack]

It seems there is even no selection-change event fired (see https://github.com/quilljs/quill/issues/2186). From the source code, it seems that onBlur depends on that event.

[patotoma]

I also noticed that when I'm calling: document.activeElement.blur() and .ql-editor was active before, there is no onBlur event fired.

[cmrd-senya]

There is another ticket on Quill repository about this issue: https://github.com/quilljs/quill/issues/1680

It's mentioned there that it's possible to set a handler for the native blur event for Quill DOM node:

editor.root.addEventListener('blur', function () {
  console.log('editor.root.innerHTML blur');
});

So in theory it must be possible to implement onBlur prop for react-quill using the native blur event instead of selection-change event from Quill. I wonder what's maintainers' opinion on that - do you think it's a good idea? CC @alexkrolick @zenoamaro

[alexkrolick]

It may be possible, but we would still have to handle changing selection to the other non-editor elements within Quill like the toolbar.