Quill: Ehancement: OnFocus and OnBlur events

[vqoph]

Has asked in #1273 by @benbro

@abramz please open a new issue with your explanation why selection-change event isn't enough to detect focus and blur with all the info requested in the issue template.

it's look like @abramz didn't do it so I do

The legit explaination of @abramz

In addition to what @wilk said... 8 months ago, there is no selection-change event when the editor is focused and the user clicks outside of the editor.
This is a rich text editor, HTML text inputs have focus & blur events. QuillJS should too.

What @wilk said :

@benbro unfortunately, selection-change is not triggered when the user clicks on the same row that has been selected.
this problem occurs when you focus on a certain node and then click inside the editor to loose the focus on the previous node: with selection-change this cannot be achieved if you click on the same selected row.

Anything new about that ?

[vqoph]

After investigating, I found a way to manage onfocus and onblur events on the field child div element

document.getElementById("quillEditor").firstChild.onfocus = () => {
   alert('focused');
}
document.getElementById("quillEditor").firstChild.onblur = () => {
   alert('blur');
}

I still think that the library lack of built-in focus and blur events

[schlebe]

I use a similar technics to trap onfocus and onblur using JQuery.

> jQuery(".div-focus").focusin(function()
>  jQuery(".div-focus").focusout(function()

but this seems not work correctly every time !

Plus, when I click on an icon of Quill widget toolbar, the focusout event is fired.

In fact, if one day, you implement blur() event, don't forget to implement 2 events.
one to fire when text widget lost focus() and another to fire when Quill widget lost focus (clicking on an icon on ToolBar)

Another solution would be to pass an event parameter that indicates when widget that gains focus in an external or internal (relatively to Quill widget) widget.

I think that Quill widget lacks of built-in focus and blur events :-)

[shyamal890]

+1

[jptrainor]

The blur/focus didn't work for me. I used the selection-change event and checked if the first argument (range) is set.

[Earthii]

Bump to this. Would be really cool to add this. The previous suggested solution by @benbro
"A null range indicates selection loss (usually caused by loss of focus from the editor). You can also use this event as a focus change event by just checking if the emitted range is null or not."

doesnt work when we highlight text and then click on the toolbar for bold, italic, etc.

[crankycyclops]

I want to also add my vote for this. Being that QuillJS functions as an input element, it seems like focus and blur events should be supported like any other input element. That being said, thank you so much for an awesome tool :)

[laurensiusadi]

I'm using VueJS with vue editor quill package https://github.com/davidroyer/vue2-editor

They have blur, and focus event by checking quill selection-change
This part of code works for me (this.$emit tells parent component an event occur)

this.quill.on('selection-change', range => {
  this.$emit('selection-change', range)
  if (!range) {
    this.$emit('blur', this.quill)
  } else {
    this.$emit('focus', this.quill)
  }
});

[tbash]

Unsure if this is discouraged but provided you have access to your quill instance, you can use

this.quill.root.addEventListener("blur", console.log);

Haven't tested on other versions but we're using v1.3.6 and this works for us.

[mojtabaahn]

@tbash I used this approach but it seems it has some side effect: selection change (somehow) doesn't work with mouse anymore..

[lukebenimble]

+1 - Can use the solution provided by @tbash but there are some edge cases where that doesn't work. i.e clicking on the link blot can also fire an onBlur event.