Clicking the quill toolbar is detected as blur event

[abinay]

Hii I am making a rich text editor using quill APIs. Following is the funcitonality I am trying to achieve -

1. There is a div element clicking on which makes the quill editor appear 2.Clicking anywhere apart from the editor must make the editor disappear. 3.When the same div is clicked again the editor must appear with the same contents it had earlier(if any). 4,.When the editor is not showing the content of the editor must appear in the div and when its showing there should not be anything in the div.

So what I am doing is that when range of selection-change is null I treat it as blur event(as given in Quill documentation) and emit an event to make the editor disappear.

BLOCKER- When I click on the empty space of toolbar or any menu of toolbar with multi dropdown options range of selection-change gets null and the editor disappears.

Click on toolbar must not make the range of selection-change as null because toolbar is also a part of the editor.Other text editors like TinyMCE do not treat click on toolbar as blur event,hence this kind of problem does not appear.

Any help in this regard?? I am stuck int this for quite some time now . When can I expect quill to provide APIs for blur and focus detection. ???

[eamodio]

We worked around this (with the bubble theme) by trapping mousedown on .ql-formats button and executing preventDefault() to stop the buttons from taking focus on click. It seems like something that the bubble theme would ideally handle itself.

[abinay]

@eamodio Have you reflected it in the git code ?? I did npm install ng2-quill-editor --save again and try to achieve the same above funtionality but its not working . Any help ??

[eamodio]

@abinay I haven't made any changes in the quill code -- just modified our application code to add eventlisteners to the buttons.

[sferoze]

@eamodio Trapping the mousedown on .ql-toolbar and calling e.preventDefault() fixes this. Preventing default on the parent seems to work best as it takes care of preventing blur for all buttons and dropdowns. Any reason why just the buttons?

@jhchen Trapping mousedown and calling e.preventDefault() on .ql-toolbar works well for me and chrome and firefox. Seems to be a solution as long as it works in Edge or IE. This fixes the selection from being removed while using the formatting toolbar even when clicking the dropdowns like for font or paragraph align. This is very simple change for big improvement, any reason it has not been implemented other than time?

[jhchen]

I do recall trying preventDefault() on mousedown and recall it not working in enough cases to not use it. I do not recall exactly what without spending time digging in but think it had to do with non-input elements on some browsers. I think the other concern is this would only affect buttons. Dropdowns and link input should not be prevented and focus should shift otherwise they won't work.

[sferoze]

@jhchen hmm I tested in chrome, firefox, safari, and edge and I cannot notice any issues.

I prevent default on mousedown on the entire ql-toolbar. And so far the dropdowns work and even the link input works. I can select fonts, colors etc all with this fix and the selection stays nicely.

I am deploying this fix to production and am going to see if anyone has issues. I will let you know what I find. If no issues arise maybe we can revisit this fix and see if it is appropriate now.

[jhchen]

@sferoze Sounds good please let us know how it goes.

[natterstefan]

@sferoze Hello, do you have any news for us?

[pematt]

@sferoze Hi, do you have any news on this, please? Thanks!

[sferoze]

@pematt @natterstefan I have been using this fix in production for some time and no one has had any issues.

[pematt]

@sferoze Thank you so much, that is great news! Would you mind sharing the code needed to do this, please? Thanks!

[natterstefan]

Yeah, that would great @sferoze.

[armory09]

Hi, Im new to quilljs and im having the same issue. can anyone please share a snippet how to do the fixed mentioned above? Trapping the mousedown on .ql-toolbar and calling e.preventDefault() fixes

[McKenzieW]

Is there a non-jQuery solution to this issue?

[harshini66]

Try this code.. It works better for me.. document.querySelector('.ql-picker-label').addEventListener("click", function(e){ e.stopPropagation(); });

[mmmiitr]

Dropdowns and link input should not be prevented and focus should shift otherwise they won't work. Facing the exact same issue, not sure how it works for others @sferoze

[MohamedSayedSalah]

this how to detect a toolbar click using promises with stats `

const onToolBar = ()=>{
    return  new Promise((resolve)=> {
        document.querySelector('.ql-toolbar').addEventListener("click", (e) => {
            resolve(true);
        })
        setTimeout(()=>{
            resolve(false);
        },50);
    });
}

const onEditorBlur = () => {
         onToolBar().then((onToolBar)=>{
              if (!onToolBar)
                setFocus(false) ;
         })
}`

[hussainsaify17]

Solved using below this

const blurWrapper = () => { if(!props.onBlur) return; let okayToCallBlur = true; if (!props.disabled) { let _RTEinstance = document.getElementById(uniqueRTEid); let qlPickerLabels = _RTEinstance?.getElementsByClassName('ql-picker-label') || []; for (let i = 0; i < qlPickerLabels.length; i++) { if (document.activeElement === qlPickerLabels[i]) { okayToCallBlur = false; } } } if (!props.disabled && okayToCallBlur) props.onBlur() }

[tungvn]

I am making a custom toolbar with Quill editor and the issue has happened when I clicked the dropdowns by vue-select component. Trapping the event click or mousedown and calling e.preventDefault() didn't work. Any idea for me?

[luthfimasruri]

Problem: loses selection when i click some toolbar menus, especially the dropdown one Solution: Trapping the mousedown on toolbar container and calling e.preventDefault()

quill.getModule("toolbar").container.addEventListener("mousedown", (e) => {
  e.preventDefault();
});

[hkorpi]

I had similar problem and I created a custom event: quill-focusout, which is dispatched only when focus leaves from toolbar, editor and tooltip (link editor). Now instead of blur I just listen to quill-focusout events.

const q = new Quill(node, {...});

// root element contains toolbar, editor and tooltip
const root = node.parentElement;

// add dummy href for link action anchor elements
// so that these are visible in focusout.relatedTarget
const action = root.getElementsByClassName('ql-action')[0];
action.href="";
const remove = root.getElementsByClassName('ql-remove')[0];
remove.href="";

const focusoutListener = event => {
  if (!root.contains(event.relatedTarget) &&
       event.target !== action) {
    node.dispatchEvent(new CustomEvent('quill-focusout', {bubbles: true}));
  }
}
root.addEventListener('focusout', focusoutListener);

The idea is that quill-focusout is dispatched from focusout only when focusout.relatedTarget is not inside quill root element. Property focusout.relatedTarget contains the element which obtains the focus.

[pradeepkumawat2112]

https://www.youtube.com

[pradeepkumawat2112]

http://www.google.com

[pradeepkumawat2112]

www.google.com

[Khalilw1]

Hello there, I am still facing a similar issue when trying to trigger the toolbar tooltip.edit() form a custom link button I am building where the tooltip would disappear