Using <input> inside a contenteditable="false" is broken in Firefox

We noticed a bug in Firefox, rendering a node as follows is broken:

<div contenteditable="false">
  <input type="text" />
</div>

There are two things to note:

1. Left/right arrow keys don’t move the caret
2. Pressing a character key (or backspace) throws an error:

Permission denied to access property “nodeType”

I created a repository reproducing the error with Slate and a minimal setup: http://gabinaureche.com/slate-firefox-bug/

The error comes from isInEditor which tries to read window.getSelection().anchorNode.nodeType but anchorNode is “Restricted”.

This bug is reproducible without Slate, here’s a pretty simple scenario: https://jsfiddle.net/hsqebsk2/1/

I filed an issue to Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=1449936

Probably related to #843

[erquhart]

Just wanted to outline how critical this is, as I’m not certain that’s clear.

This bug means projects that support Firefox, which is most projects, can’t use inputs in Slate, as Slate controls the contenteditable attributes within itself and I think they’re always false for void nodes.

Best repro of this bug is in Slate’s example site - try editing the YouTube video url in firefox: https://www.slatejs.org/#/embeds

I’m working on tracking down the commit where this broke - we ran into it by upgrading slate from ^0.30 to ^0.34 and slate-react from 0.10.11 to 0.12.9.

[ianstormtaylor]

I’ve rolled back the regression that made inputs inside voids unable to be focused in all browsers, so this issue can remain for the Firefox case.