Warning: A component is `contentEditable` and contains `children` managed by React

[iroy2000]

The following is an example editor component

`
import React from 'react';
import {Editor, EditorState} from 'draft-js';

export default class MyEditor extends React.Component {

constructor(props) {
    super(props);

    this.state = {
        editorState: EditorState.createEmpty()
    };
}

onChange = (editorState) => {
    this.setState({editorState});
}

render() {
    const {editorState} = this.state;
    return <Editor editorState={editorState} onChange={this.onChange} />;
}

}
`

And in my parent component

import MyEditor from './MyEditor'

.... // in the render() method
`
render() {
let error = this.getError();

    return (
        <form className="post__form">
            {error}
            <div className="form-group">
                <label htmlFor="title">Title</label>
                <input type="text" ref="title" className="form-control" id="title" placeholder="Title" />
            </div>
            <div className="form-group">
                <label htmlFor="description">Description</label>

                <MyEditor />

            </div>
            <button type="submit" onClick={this.onClickHandler.bind(this)} className="btn btn-default">Submit</button>
        </form>
    );
}

`

And I see this warning

Warning: A component is contentEditable and contains children managed by React. It is now your responsibility to guarantee that none of those nodes are unexpectedly modified or duplicated. This is probably not intentional.

[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. :)

[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)
        }
    }
})()

[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!

[sdoomz]

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

[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>
    );
  }

[RTeran]

With the suppressContentEditableWarning prop you can solve this issue

[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>