Slate: Focus is stolen from input and textarea elements in void nodes

[rfeltis]

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

bug

What's the current behavior?

Focus from input and textarea controls have their focus stolen when clicked, even though they are rendered as void nodes. If the controls are tabbed into, the focus remains.

May be a regression of this issue: https://github.com/ianstormtaylor/slate/issues/1744

JSFiddle: https://jsfiddle.net/rfeltis/fj9dvhom/2742/

OS: macOS Mojave 10.41.1
Browser: Chrome 71.0.3578.98 and Firefox 64.0

What's the expected behavior?

The focus stays inside of the input and textarea fields.

[zhujinxuan]

I believe the problem is in the onMouseDown branch here:
https://github.com/ianstormtaylor/slate/blob/13107b0c437fe0e84231c87f6e7887f6defc08c8/packages/slate-react/src/plugins/after.js#L390-L398

[nicolaslecrique]

Hello, I have the same issue, @zhujinxuan @rfeltis did you found a workaround ?

[nicolaslecrique]

By capturing onBlur event on my <input>, I see that the code responsible for un-focusing is the one below.
Basically, there is a inconsistency between activeElement (which is the input) that is not the editor itself, and the editor is considered to be focused (selection.isFocused=true)

https://github.com/ianstormtaylor/slate/blob/13107b0c437fe0e84231c87f6e7887f6defc08c8/packages/slate-react/src/components/content.js#L175-L180

[rfeltis]

Hello, I have the same issue, @zhujinxuan @rfeltis did you found a workaround ?

@nicoxx As a workaround, we added preventDefault/stopPropagation to the click handler of our inputs. Fixes it for the time being.

[jmoyers]

As an aside, I spent a few hours tracking down similar behavior in my app today. The short version is, if you have ANY onBlur handler attached to the Editor, preventDefault/stopPropagation workaround stops working and you can no longer focus inputs within a void node.

Simplest demonstration is to add onBlur={() => {}} to the https://www.slatejs.org/#/embeds example. You can then no longer click on the video and edit the link. Also, maybe a related bug, if you actually type anything in the input without the onBlur, focus is maintained, but your cursor is moved to the end of the input.