Selection change not triggered when focus changed to button

[felipeochoa]

Steps for Reproduction

1. In the playground, add a button element to the HTML after the editor (and modify CSS to make button visible)
2. Add quill.on('selection-change', (...args) => console.log(args)); to playground JS
3. Set console to the iframe context
4. Type some things, change selection, verify that console logging is working.
5. Click on button. Notice lack of logging, even though button now has focus

Expected behavior:
When clicking on a button, editor is blurred, triggering a selection-change event with null as the new selection.

Actual behavior:
The editor loses focus (it's no longer the active element), but there's no selection-change event triggered.

I've tracked the problem down to document.getSelection() not being updated in either browser. Is this a browser bug? Should getSelection return the button content or something like that? If not, then I think Quill should special-case the 'blur' event to ensure that the event is accurately fired. If it is a bug, I'll file it, maybe in the meantime Quill could still work around this issue with the mentioned check?

Platforms:
Ubuntu 16.10, Firefox 52.0.4 and Chrome 57.0.2987.98

Version:
Quill version 1.2.3

[edmeehan-tcg]

Found another bug related to the 'selection-change' event. If you use the OSX spellcheck feature to correct the spelling of a word in the quill text editor the selection-change event stops firing.

example here https://codepen.io/edmeehan/pen/GvmKyd?editors=1111

[edmeehan-tcg]

I found that reverting to release version 1.3.0 solved the selection-change issue for me.

[amitm02]

reverting to 1.3.0 did not solve it for me, but revering to 1.2.6 did.

[jhchen]

@edmeehan-tcg The spellcheck issue seems to be related to #1654 and fixed by the same fix for it.

[chearon]

This is happening because replaced elements can't have selection. So selectionchange isn't going to fire, and Quill doesn't know that the editor doesn't have focus anymore since that's how it checks.

Note in the button example, Quill does have selection but not focus.

I ran into a similar issue when clicking a div with user-select: none set on it. Same thing: quill loses focus but not selection. This fiddle compares focus/blur event listeners with selectionchange listeners. Click from the top div to the 2nd div, and from the top div to the 3rd div.

Since focus state can change independently from selection state, it looks like there's no way around it - Quill might have to add listeners for blur or focusout to fix this.

[chearon]

Also, the work-around for this is:

quill.root.addEventListener('blur', e => quill.setSelection(null));

[gregzki]

Error still occurs, chearon work-around is fixing it