Draft.js editor lost focus on Android browser(s) after first word

Question

I'm using Draft.js in a React.js project. The Editor works fine on desktop browser(s) (Chrome,Firefox, IE, Edge...) but I have problem in Android device.

After I enter the first word in editor and press spacebar (on soft keyboard) the Editor lost focus & I will have to touch there again if I want to continue to type in the Editor.

This is such a very bad user experience. The Draft.js Editor setup is nothing special, just like their example.

Anyone have same problem & have a fix please ?

Answer 1

We got around the problem by disabling autocorrect for the contenteditable div, like so:

componentDidMount = () => {
  $('.DraftEditor-editorContainer div').attr('autocomplete', 'off').attr('autocorrect', 'off').attr('autocapitalize', 'off')
}

There's probably a way to do it without jQuery, but we've already wasted so much time on this problem this was a simple solution. :)

Update

I've submitted a pull request that solves the problem for me. Hopefully other people find it useful. This allowed me to keep autocorrect enabled. I applied the changes in this PR to the v0.10.0 tag of the draft-js repo, NOT master.

Answer 2

The following seems to work in [email protected]

<Editor 
  autoCapitalize={'none'}
  autoComplete={'off'} 
  autoCorrect={'off'} 
  spellCheck={false} ... />