Warning: A component is `contentEditable` and contains `children` managed by React about draft-js

[davisml]

I ended up adding this code to my project as a temporary solution:

console.error = (function() {
    var error = console.error

    return function(exception) {
        if ((exception + '').indexOf('Warning: A component is `contentEditable`') != 0) {
            error.apply(console, arguments)
        }
    }
})()

[RTeran]

With the suppressContentEditableWarning prop you can solve this issue

[Drafter500]

One more alternative is to add contentEditable attribute later on in componentDidMount() method. This produces no warning for me

  componentDidMount() {
     $(this.textedit).attr('contentEditable', true);
  }

  render() {
    const { value } = this.props;
    return (
      <div
        ref={(r) => { this.textedit = r; }}        
      >
        {value}
      </div>
    );
  }

[sdoomz]

As an alternative you can set your console filter to regexp mode with the value: ^((?!contentEditable).)*$

[tasti]

You aren't doing anything wrong.

This a known issue (http://facebook.github.io/draft-js/docs/advanced-topics-issues-and-pitfalls.html#react-contenteditable-warning) and it's being tracked in the react repo: facebook/react#5837

[hellendag]

Yep, really looking forward to eliminating this warning. :)

[jackcallister]

@davisml crazy, I was just looking for a way to do this.

[davisml]

@jarsbe I'm glad I could help! :)

[jackcallister]

@davisml That's some speedy tech support, cheers!

[lazysergey]

@RTeran this is real solution 👍

[nikhil-bacancy]

<span id="activeLayerName" className="name" suppressContentEditableWarning={true} onClick={this.toggleLayerNameInEditMode} onBlur={this.toggleLayerNameInEditMode} contentEditable={this.state.isLayerNameEditable}> xyz </span>