Quill: Missing selection-change event when editor loses focus by clicking a button

[medihack]

Steps for Reproduction

1. Visit https://codepen.io/medihack/pen/GBRYXw
2. Select the editor to focus it. A selection-change event is correctly fired (see console).
3. Click the "Click me" button below the editor. No selection event is fired.

Expected behavior:

A selection-change event should be fired with a null range when the editor loses focus when clicking a button somewhere else.

Actual behavior:

The selection-change event is not fired when the editor loses focus by clicking on a button.

Platforms:

Chrome (67.0.3396.99) on Windows 10.

Version:

Quill 1.3.6

[mdciotti]

To add to this, I don't think a selection-change event should be fired in this case. selection-change should indicate that calling getSelection will return a different result after the event. If we want to detect if the editor lost context, we should have a separate blur event. Note: if you select a range of text then click the button, your selection is not lost. Clicking any of the formatting buttons will still work on your selected range.

If we choose to emit a selection-change event here (instead of blur), that would imply that our internal selection was lost as well as the context.

For now, you could probably attach your own focus/blur event listeners to the element with content-editable to handle context change.

[ashconnell]

We needed to know when the selection-change range changes to null so that we can send it off via WebSocket to sync cursors.

The documentation (https://quilljs.com/docs/api/#selection-change shown in the screenshot below) says that you can use this to be notified of selection loss but the event is never triggered when the editor is blurred.

To fix our problem we just got a hold of the editor element and listened for blur like so:

const quill = new Quill(/* config */)
quill.editor.scroll.domNode.addEventListener('blur', () => {
  // ... do stuff here, in our case we send cursor range:null to the server
})

[clusterberries]

Hi! Any updates about this issue? Maybe v2 contains some changes in this area?
The solution above is not 100% correct, because blur event is triggered even if user changes something via toolbar and actual focus is still on the editor.

[bviala]

blur is also triggered when pasting content in the editor which makes it not ideal.

duplicate #1680 #1951 #1397

[andrii-oleksyshyn]

Hi guys, do you have any updates about this issue?
Can we have something like direct 'blurEditor' method as a workaround?

[tienan92it]

I have same problem. I use Quill with ReactJs so I write a component call ClickOutside and wrap Editor inside it. Below is my component. I think you can write another by this logic.

function ClickOutside({ children, onClick }) {
  const refs = React.Children.map(children, () => React.createRef());
  const handleClick = e => {
    const isOutside = refs.every(ref => {
      return !ref.current?.contains(e.target);
    });
    if (isOutside) {
      onClick();
    }
  };
  useEffect(() => {
    document.addEventListener('click', handleClick);

    return function() {
      document.removeEventListener('click', handleClick);
    };
  });
  return React.Children.map(children, (element, idx) =>
    React.cloneElement(element, { ref: refs[idx] })
  );
}

Hope this can help everyone!