Draft-js: Draft Editor doesn't always take focus when clicking between it and another control...

[steviesama]

Sometimes it either takes a really long time to get focus after load, or won't let you click inside of it for a while. Later I noticed clicking between it and another control resulted in a similar behavior where it "randomly" won't accept focus. I did, however, notice that if you give focus to the control above it, that you can always tab to the draft editor to give it focus.

[steviesama]

I think reading an issue in the draft-js-plugins repo, that I have narrowed this down. It's not that it doesn't take focus, it is that I was expecting it to receive focus if I click anywhere inside the text area, and it only takes click focus if you click in the left most portion of the text area inside the editor. It must not be the size of the entire (seemingly) editable area.

[steviesama]

Narrowed it down a little further. It's not just the left side that will take focus, it's as if there is only a single line container that is text height, that will accept focus. If your min height is more than 1 line of text tall, any other location inside of the text area that you click will not give focus. I've seen live demos of like these on Heroku and I have checked them out and it doesn't behave like this.

[steviesama]

Turns out that only the draft root was getting focus.

The problem there is I had the focus code in the wrong place. I'll add a screen shot of my changes below. What fixed it is writing the focus method, and making sure it is referenced by the editor containing div's onClick event handler. Div's can't be focused, so be sure it's click, and link it to focus, which puts focus on the editor, the editor has to have the ref="editor" in order for this to work.