useFocused hook displays old value

[jhurwitz]

Description
The results of the useFocused hook are unexpected. I dug into the root cause, and I believe it's from #3988. I have a fix forthcoming, so I'll explain more in my PR and will let the reproduction steps below serve as documentation of the issue.

Recording

• If you don't type any text in the editor, and just click in and out of it repeatedly, after the first click, useFocused always indicates the opposite of whether the editor is focused.
  
• If you type text into the editor, and then click in and out of it repeatedly, useFocused almost always indicates that the editor is focused even when it's not (except for brief flashes of not focused when you first focus).
  

Sandbox
The two GIFs above are from this code sandbox.

Steps
To reproduce the behavior:

1. Go to the code sandbox
2. Click into the editor
3. Click out of the editor
4. Click back into the editor

Expectation
Expected: you should see "not focused" after step 3, and "focused" after step 4. The actual behavior is flipped.

Environment

• Slate Version: 0.72.3
• Operating System: macOS 12
• Browser: I have reproed in both Chrome 96 and Safari 15.1

Context
I'll create a PR soon.

[adri1wald]

I've done a bit of experimentation as I've run into the same issue with my editor, and noticed that this error only happens on react version 17. If you use react and react-dom 16 in this code sandbox you'll see the inverted behaviour goes away. I will dig into what makes the difference

Edit: I think I've narrowed it down to this change in React 17: facebook/react#19186. The order of execution of the document focus listener and the onFocus handler on the Editable component are reversed. In 16, onFocus fires before so the state is set properly. In 17, onFocus fires after so the state is set improperly