Ngx-quill: on Blur event does not triggered

[afiqwazien]

Somehow the onblur event does not triggered when clicking button or input element outside of the editor. Is this the expected behaviour?

[KillerCodeMonkey]

i do not think so :D

[afiqwazien]

i have just created a simple example , https://stackblitz.com/edit/angular-jrpyk7

clicking button when editor is focused does not trigger onBlur event

[KillerCodeMonkey]

checkout this comment.
https://github.com/quilljs/quill/issues/2186

the quilljs editor is not "blurred" by clicken a button outside.

select some text, click on the button and then click on a format button (e.g. bold) and start typing.
the editor has not lost focus and is still active (even the cursor is not visible)

[afiqwazien]

yes, so just to clarify, clicking a button outside does not fire onBlur event right?

because the blur event for normal input will fire when clicking a button, updated example

[KillerCodeMonkey]

yeah i know that, but ngx-quill is only a wrapper of quilljs.

So the only chance i have to check, if the editor is blurred, is to check if the active selection changed to null.

So onBlur and onFocus outputs are only special cases of onSelectionChanged under the hood (metioned here: https://github.com/KillerCodeMonkey/ngx-quill#outputs that selection changed is also triggered for blur and focus).

depends what a user expects, when the focus and blur output should fire.

So is this more a quill issue, that the selection should be reset, after clicking outside the editor and toolbar?

[afiqwazien]

Okay, so this is more a quill issue then.
As always, thank you for the quick responses.

[KillerCodeMonkey]

no probs. in the beginning i thought about how to implement focus and blur. if i use the native dom events the "focus" is not the real focus of the editor.

But implementing focus and blur in different ways feels a little bit hacky.

So i just implemented the default "quilljs" way to check if the editor is blured or focused.

[kut]

Hi folks - in case it's helpful, I wanted to mention that how we solved this (as well as some other blur/focus problems) was following the advice in https://github.com/quilljs/quill/issues/2186#issuecomment-533401328:

Template:

<quill-editor (onEditorCreated)="onQuillEditorCreated($event)" ...></quill-editor>

Component:

    onQuillEditorCreated(editor) {
        editor.root.addEventListener("blur", () => this.updateBlur.emit());
    }

[KillerCodeMonkey]

@kut

Is this not working for you?

<quill-editor (blur)="handleBlur($event)">

Did not tried it, but should work, because the native blur event bubbles to the parent nodes.

[kut]

Sadly it didn't, not really sure why but the onSelectionChanged event doesn't seem to fire correctly in some circumstances (e.g. button, e.g. sometimes when in a table). Seems like QuillJS issue, and the only way to overcome in all of my test cases was to add the event listener like in my previous comment...

[KillerCodeMonkey]

Ah okay strange. Maybe quilljs prevents The native Focus and Blur Events
from bubbling. Thanks for Sharing :)

Kut Akdogan [e-mail] schrieb am Di., 24. März 2020, 20:38:

Sadly it didn't, not really sure why but the onSelectionChanged event
doesn't seem to fire correctly in some circumstances (e.g. button, e.g.
sometimes when in a table). Seems like QuillJS issue, and the only way to
overcome in all of my test cases was to add the event listener like in my
previous comment...

—
You are receiving this because you modified the open/close state.
Reply to this email directly, view it on GitHub
https://github.com/KillerCodeMonkey/ngx-quill/issues/390#issuecomment-603464588,
or unsubscribe
https://github.com/notifications/unsubscribe-auth/AARI4YFAPSEBTSEQ6S7OINTRJED2FANCNFSM4HO2G2AA
.

[heavybeard]

Hi folks - in case it's helpful, I wanted to mention that how we solved this (as well as some other blur/focus problems) was following the advice in quilljs/quill#2186 (comment):

Template:

<quill-editor (onEditorCreated)="onQuillEditorCreated($event)" ...></quill-editor>

Component:

    onQuillEditorCreated(editor) {
        editor.root.addEventListener("blur", () => this.updateBlur.emit());
    }

In order to enhance a nice solution posted by @kut (thank you), I would share with you another solution with rxjs in order to unsubscribe from the observable of the event.

fromEvent(this.quill.root, 'blur')
      .subscribe(() => {
        this.updateBlur.emit()
      });