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

[martriay]

@jmaguirrei thank you very much! But I ended suppressing it manually:

console.error = (function(_error) {
  return function(message) {
    if (typeof message !== 'string' || message.indexOf('component is `contentEditable`') === -1) {
      _error.apply(console, arguments)
    }
  }
})(console.error)

[jmaguirrei]

Yes, Just use suppressContentEditableWarning in your component.
Be aware that this is not related with draftjs but with the use of any div that is content editable, so you may ne having this warning at another component.
That was my case...

Let me know, glad to help.

BTW I dont know how to make a mention on mobile phone... :( do you?

[jmaguirrei]

@martriay Try putting the property at the containing div of the editor, like:

  render() {

    const
      { isSelectionActive, selectionCoords } = this,
      { size, owner } = this.props,
      readOnly = !owner;

    return (
      <div
        style={styles({})['my-editor']}
        onClick={this.onFocus}
        onBlur={this.onSave}
        suppressContentEditableWarning={true}
      >
        <div id={this.props.id} className='editor-scroll' style={styles({ size })['editor']}>
          <Editor
            editorState={this.state.editorState}
            onChange={this.onChange}
            handleKeyCommand={this.handleKeyCommand}
            keyBindingFn={this.myKeyBindingFn}
            handleBeforeInput={this.handleBeforeInput}
            readOnly={readOnly}
            placeholder={this.placeholder}
            ref='editor'
          />
        </div>
        {
          isSelectionActive &&
          <div style={styles({ selectionCoords })['selection']}>
            MySelection
          </div>
        }
      </div>
    );
  }

[naoyeye]

@jmaguirrei suppressContentEditableWarning is work fine, Thanks!

[sophiebits]

Known problem. http://facebook.github.io/draft-js/docs/advanced-topics-issues-and-pitfalls.html#react-contenteditable-warning

React 15 will give a way to silence this.

[sophiebits]

The key warnings could be fixed though.

[jmaguirrei]

Hello, I am still having this warning, but I checked the draft-js code (0.7.0 version) and it has the suppressContentEditableWarning: true, prop in the file.

I also have react 15.3.1 so, I am wondering what could be wrong.

[sophiebits]

@jmaguirrei You must not actually have react-dom 15.3.1. Check npm ls for the full dependency tree.

[jmaguirrei]

@spicyj Thanks. I wasn't with react-dom 15.3.1, but after upgrade I am still having same warning.

If I go to the function the console shows in ReactDOMComponent.js this is:

function assertValidProps(component, props) {
  if (!props) {
    return;
  }
  // Note the use of `==` which checks for null or undefined.
  if (voidElementTags[component._tag]) {
    !(props.children == null && props.dangerouslySetInnerHTML == null) ? process.env.NODE_ENV !== 'production' ? invariant(false, '%s is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`.%s', component._tag, component._currentElement._owner ? ' Check the render method of ' + component._currentElement._owner.getName() + '.' : '') : _prodInvariant('137', component._tag, component._currentElement._owner ? ' Check the render method of ' + component._currentElement._owner.getName() + '.' : '') : void 0;
  }
  if (props.dangerouslySetInnerHTML != null) {
    !(props.children == null) ? process.env.NODE_ENV !== 'production' ? invariant(false, 'Can only set one of `children` or `props.dangerouslySetInnerHTML`.') : _prodInvariant('60') : void 0;
    !(typeof props.dangerouslySetInnerHTML === 'object' && HTML in props.dangerouslySetInnerHTML) ? process.env.NODE_ENV !== 'production' ? invariant(false, '`props.dangerouslySetInnerHTML` must be in the form `{__html: ...}`. Please visit https://fb.me/react-invariant-dangerously-set-inner-html for more information.') : _prodInvariant('61') : void 0;
  }
  if (process.env.NODE_ENV !== 'production') {
    process.env.NODE_ENV !== 'production' ? warning(props.innerHTML == null, 'Directly setting property `innerHTML` is not permitted. ' + 'For more information, lookup documentation on `dangerouslySetInnerHTML`.') : void 0;
    process.env.NODE_ENV !== 'production' ? warning(props.suppressContentEditableWarning || !props.contentEditable || props.children == null, '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.') : void 0;
    process.env.NODE_ENV !== 'production' ? warning(props.onFocusIn == null && props.onFocusOut == null, 'React uses onFocus and onBlur instead of onFocusIn and onFocusOut. ' + 'All React events are normalized to bubble, so onFocusIn and onFocusOut ' + 'are not needed/supported by React.') : void 0;
  }
  !(props.style == null || typeof props.style === 'object') ? process.env.NODE_ENV !== 'production' ? invariant(false, 'The `style` prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + \'em\'}} when using JSX.%s', getDeclarationErrorAddendum(component)) : _prodInvariant('62', getDeclarationErrorAddendum(component)) : void 0;
}

// and below in the file...

var RESERVED_PROPS = {
  children: null,
  dangerouslySetInnerHTML: null,
  suppressContentEditableWarning: null
};

// and in npm ls
├─┬ react@15.3.1
│ ├── fbjs@0.8.4
│ ├─┬ loose-envify@1.1.0
│ │ └── js-tokens@1.0.3
│ └── object-assign@4.1.0
├── react-addons-perf@15.3.0
├── react-addons-pure-render-mixin@15.3.0
├── react-dom@15.3.1
├─┬ react-hot-loader@1.3.0
│ ├── react-hot-api@0.4.7
│ └─┬ source-map@0.4.4
│   └── amdefine@1.0.0

Any idea why this is happening?

[sophiebits]

No, I'm not sure.

[martriay]

@jmaguirrei did you succeed? I'm having the same issue

[jmaguirrei]

@martriay Nice solution to have as a general escape... Thanks also!

[rimzzlabs]

Encountered this issue on Quilljs, can you guys help me to remove the error message?