Focus breaks when calling setState in onFocus / onBlur

Do you want to request a feature or report a bug?

bug

What’s the current behavior?

When you call setState() from within an onFocus() or onBlur() handler the editor can no longer receive / release focus. Here is a JSFiddle illustrating the problem: https://jsfiddle.net/fj9dvhom/2611/. Just try to focus or unfocus the editor.

Chrome: Version 70.0.3538.102 (Official Build) (64-bit) Mac OS: 10.14.1

What’s the expected behavior?

Focusing should work correctly.

I have a suspicion that the setState() call is causing a render event before the editor can finish handling the original focus / blur event. Wrapping the setState() in a setTimeout() seems to alleviate the issue.

[klis87]

#2451 is a different issue, this bug occurs even with one editor. For some reason setTimeout fixes blurring:

onBlur = (event, editor, next) => {
    next();
    setTimeout(() => this.setState({ hasFocus: false }), 0);
}; 

which imho this is the proof that it is a race condition issue.

See online demo: https://jsfiddle.net/fj9dvhom/2734/

[rahul1995]

I’m quite surprised to find that setState() on a parent’s onBlur/Focus handler also prevents the editor from gaining/losing focus. I’d expect Editor’s inner workings to be immune from external state changes like this?

I’ve forked @ericedem’s fiddle, and simply moved the onFocus/Blur handler to a <div> wrapper to demonstrate the problem here: https://jsfiddle.net/thatmarvin/sLkq06yt/

Wrapping setTimeout also fixes the problem: https://jsfiddle.net/thatmarvin/fa0encyd/

Yes, this one needs to be fixed on priority as it’s totally a blocker. It took my 2 days to figure out why my editor was not working, as it doesn’t even throw any error.