0

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 ?

cyberlobe
  • 1,783
  • 1
  • 18
  • 30
Duc Nguyen
  • 31
  • 3

2 Answers2

2

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.

Andrew Smith
  • 1,434
  • 13
  • 29
1

The following seems to work in draft-js@0.10.1

<Editor 
  autoCapitalize={'none'}
  autoComplete={'off'} 
  autoCorrect={'off'} 
  spellCheck={false} ... />
pr0da
  • 53
  • 1
  • 5