DOM mutation observer refocuses the editor preventing Tab navigation

[kloots]

At Slack we're using the focus-ring library to style focus when the user navigates using the keyboard. The focus-ring library binds focus and blur event listeners used to add and remove a focus-ring class from the event target. Unfortunately, once you navigate into a Quill editor using the Tab key, you cannot navigate out by pressing Tab as a result of Quill re-focusing the editor in response to DOM mutation. (Specifically, Quill currently calls setNativeRange() in response to a mutation event.)

Here's the breakdown of the the sequence of events:

1. The user presses Tab to navigate out of a Quill editor, and in response to the blur event the focus-ring library removes the focus-ring class from the editor's contenteditable <div>.
2. The callback for the mutation observer created by Parchment's ScrollBlot is called, which in turn calls update()
3. update() emits a 'scroll-before-update' event.
4. Selection's 'scroll-update' listener calls setNativeRange() method.
5. setNativeRange() focuses the editor if it doesn't already have focus

Steps for Reproduction

1. Visit the repro example on codepen.io
2. Use the Tab key to move from button one, to button two, then into the editor
3. Try to use the Tab key to move from the editor to the third button

Expected behavior:

You should be able to press Tab to exit the editor.

Actual behavior:

Re-focusing the editor in response to the DOM mutation (class name removal) prevents the user from navigating out via the Tab key.

Platforms:

Chrome on Mac and Windows (and likely Linux, but wasn't able to test on Linux)

Version:

1.2.3

[kloots]

Thanks so much for this fix @jhchen. Can you publish this update to npm so we can pickup this fix at Slack?

[jhchen]

Yes I will later today but want to get a couple other bug fixes in.