Draft-js: spellCheck and readOnly

[oscarmorrison]

Do you want to request a feature or report a bug?
Bug
What is the current behavior?
I have a toggle to change draftjs window from editable to readonly.
My editor is setup like so:

  <Editor
      editorState = {editorState}
      onChange = {this.onChange}
      handleKeyCommand={this.handleKeyCommand}
      onTab={this.onTab}
      spellCheck={!this.readOnly}
      readOnly={this.readOnly}
  />

The spell check works in editing mode (not-readonly). But when in readOnly mode (when the spellCheck should be disabled) it still shows spelling error.

**If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. You can use this jsfiddle to get started:

https://jsfiddle.net/q6ko96mv/1/

What is the expected behavior?

Spell check should be hidden.

Which versions of Draft.js, and which browser / OS are affected by this issue? Did this work in previous versions of Draft.js?

0.9.1

[davidchang]

Thanks for opening this @oscarmorrison - this seems like a bug to me. Would you be interested in putting in the fix? Looks like it would be around here: https://github.com/facebook/draft-js/blob/master/src/component/base/DraftEditor.react.js#L270

[oscarmorrison]

Hi @davidchang I spent some time this morning debugging this. I am not sure that it is actually a DraftEditor bug. I think this a content editable bug: this new fiddle highlights the problem:
https://jsfiddle.net/a39mcuuh/1/

one the spellCheck has been toggled the existing content is not rechecked.
there are some hacky solutions like a blur() -> focus() to fix. but not nice

[jchomicki]

@davidchang I am also hitting this bug and would love to see a fix. It makes the user experience dealing with spellcheck pretty abysmal when it is expected to function like spellcheck on an input.
The hacky blur()->focus() did not seem to resolve the problem.

[oscarmorrison]

@davidchang do you anyway to make a custom block no spell check.
trying to add spellcheck='false' (or spellCheck)

not working

[oscarmorrison]

This is the behavior i am expecting: http://jsfiddle.net/fAM7E/

[djackson1]

I don't know if people still need a solution for this or have another one, but I found a solution that seems to successfully toggle the spellcheck on and off.

React will re-render a component if the key changes, so having the key prop set to the spellcheck prop turns off the spellcheck once you disable spellcheck as the whole component will unmount and remount (hence not having spellcheck toggled on the content editable)

<Editor
  spellcheck={this.props.spellcheck}
  key={this.props.spellcheck} 
/>

[jaril5976]

@djackson1 Thanks for the help, spellcheck toggle is working fine after key implementations, Thanks!!