dangerouslyPasteHTML may steal the input focus

dangerouslyPasteHTML sets the focus to the Quill editor element. In a setting with concurrent HTML changes, where the edited content receives external updates of the HTML, dangerouslyPasteHTML leads to unwanted loss of focus, if the current focus is not on the Quill editor.

Steps for Reproduction

1. Visit https://codepen.io/anon/pen/Yvrwme?editors=0010
2. Try typing in the JS code box (i.e. not within the Quill editor) for 2 seconds

This example simulates updated HTML from an “external” source every 1 second.

Expected behavior:

The input focus is kept in the JS code box. This could be:

• an API which allows to update from HTML, without changing focus
• make dangerouslyPasteHTML not change the input focus

Actual behavior:

The input focus is lost

Platforms:

OSX Chrome, Win 10 IE 11

Version:

1.3.6

[jri]

This way you can set HTML content without changing the focus:

const html = '<p>Set HTML content <i>without</i> changing focus</p>'
const delta = quill.clipboard.convert(html);
quill.setContents(delta);

That is don’t use pasteHTML but convert your HTML to a delta and use setContents instead. It works for me. Focus does not change.

I think the Quill docs do not mention quill.clipboard.convert. But I found it here: https://codepen.io/iice/pen/vQKrWY

[johnozbay]

For our specific use case, (which is to prevent the on-screen keyboard from suddenly popping-up due to editor receiving focus) a quick disable & enable did the trick. Simplified example :

quill.disable();
quill.clipboard.dangerouslyPasteHTML(index, html);
quill.enable();

We now try our best to disable the editor while it’s not in use, and re-enable it right before it’s ready for use to work around some of these edge-cases.

And this way, if you’re addicted to danger & adrenaline like I do, you can continue to use your favorite dangerouslyPasteHTML instead of the setContents 🎉