Quill: handling blur event

[jk171505]

How I can detect blur event of the editor?
selection-change is not useful as its 1st argument becomes null in cases like header formatting change, therefore it's not possible to distinguish such event from clicking outside of the editor.

Use case: I'd like to init the edit when user click on specific div and close it once user click outside of the editor.

[jonathanheron]

I have the very same use case and the same problem. I'd love an official "blur" event for the editor, but in the meantime I'm wrapping the editor in a DIV that stop clicks inside the editor from bubbling up to parent DIVs. Then, on the parent DIVs I capture the clicks and close the editor if it is open.

[DmitrySkripkin]

Well, you have 'selection-change' event. You can catch focus and blur easily:
CodePen blur/focus example

I think the problem is blur event fired when quill toolbar is clicked (like header formatting, links etc.)

[vlad-s]

I know roughly one year passed since the latest reply, but I have encountered the same issue on quill 1.3.6.

Well, you have 'selection-change' event. You can catch focus and blur easily:
CodePen blur/focus example

The main issue when using the selection-change event, is that clicking on a link (<a>) or a button (<button>) won't trigger the event, which the regular blur event does. For example, I forked @DmitrySkripkin's codepen here: input vs editor to show the differences between the two.

However, I found that adding a blur event listener on the editor's root can handle regular blur events, as shown in the codepen above.

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

I am also using the method proposed here to disable blurring upon clicking the toolbar (also used, and commented, in the codepen above).

I am not entirely sure if this is a bad thing to do, but it works well in my use-case.

[EmanH]

This effectively detects an onblur event:

quillInstance.on('selection-change', range => {

    if (!range) {
        // Instance has lost focus
    }

});

[EmanH]

IMO this is a bug.

Ah ok.