[email protected] breaks editor focus on desktop (Safari, Chrome, Firefox)

[zarv1k]

Do you want to request a _feature_ or report a _bug_?

bug

What's the current behavior?

Current latest slate stack:
[email protected]
[email protected]

Empty editor can't take focus: https://jsfiddle.net/zarv1k/vcdpn74j/
So it's impossible to add anything into the editor.

The issue is not only reproduced in empty editor. After clicking in blurred editor on the area after text content, focus loses immediately.

What's the expected behavior?

Empty editor can take focus, user can add anything into the editor:
[email protected]
[email protected]
https://jsfiddle.net/zarv1k/wv5ky9fq/1/

[briandk]

Anyone have thoughts on how to fix this? If so, I'm happy to work on a PR.

[dmitrizzle]

Same issue in Chrome 68.0.3440.106 macOS (looking at jsFiddle).
FireFox on macOS is OK.

[ericedem]

0.18.4 was a fairly small change that hooked up some missing event handlers:

1. onNativeSelectionChange()
2. When the browser has input events level 2, enable onBeforeInput().

Since this seems to be breaking in Chrome, maybe something is wrong with 2?

@zarv1k What browser is it failing for you? I confirmed Chrome is broken as well.

[ericedem]

Oh nope, this is definitely because of onNativeSelectionChange() getting added.

[ericedem]

For anyone looking for a workaround for the time being, you can do this:

<Editor
  ...
  onFocus={(event, change) => change.focus()}
/>

We were already doing this to workaround focus breaking when tabbing into the editor, which seems like it is probably a related issue.

[zarv1k]

@dmitrizzle can't agree with you about FF in my FF v.61.0.2 on macOS 10.13.6. It looks like editor has focus (you can see the caret), but you can't add anything into the editor.

[zarv1k]

@zarv1k What browser is it failing for you? I confirmed Chrome is broken as well.

In all browsers on macOS 10.13.6:
Safari 11.1.2
Chrome 68.0.3440.106
Firefox 61.0.2

[dmitrizzle]

@zarv1k I use 61.0.2 on macOS 10.12.6 and I can edit the text. Very strange.

[de83c78d1f]

@dmitrizzle FF 61.0.1 on Ubuntu 16.04, bug reproduced.

[zarv1k]

Some screen recordings:
Safari on iOS 11.4;
FF 61.0.2 on macOS 10.12.6.

[ericedem]

When I remove this bit of code https://github.com/ianstormtaylor/slate/blob/master/packages/slate-react/src/components/content.js#L152-L160 things seem to work.

It looks like the selection event is firing before things can be unblurred correctly, so the editor thinks it should be blurring, when it is currently in the process of being unblurred.

Some additional info, this is the order of operations that happens when you click the empty editor after blurring:

[steobrien]

We were already doing this to workaround focus breaking when tabbing into the editor, which seems like it is probably a related issue.

@ericedem I'm also seeing this problem in our implementation. Should I open a Slate issue for it, or is there one already open?

[ericedem]

@steobrien There isn't a specific issue as far as I'm aware.

[steobrien]

Thanks @ericedem. I’ve gone ahead and opened https://github.com/ianstormtaylor/slate/issues/2352.