diff --git a/src/browser/ui/ReactDOMComponent.js b/src/browser/ui/ReactDOMComponent.js index 276be2e93b..9b528def27 100644 --- a/src/browser/ui/ReactDOMComponent.js +++ b/src/browser/ui/ReactDOMComponent.js @@ -60,6 +60,16 @@ function assertValidProps(props) { props.children == null || props.dangerouslySetInnerHTML == null, 'Can only set one of `children` or `props.dangerouslySetInnerHTML`.' ); + if (__DEV__) { + if (props.contentEditable && props.children != null) { + console.warn( + '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.' + ); + } + } invariant( props.style == null || typeof props.style === 'object', 'The `style` prop expects a mapping from style properties to values, ' + diff --git a/src/browser/ui/__tests__/ReactDOMComponent-test.js b/src/browser/ui/__tests__/ReactDOMComponent-test.js index ef971bbac6..8eb0e105a6 100644 --- a/src/browser/ui/__tests__/ReactDOMComponent-test.js +++ b/src/browser/ui/__tests__/ReactDOMComponent-test.js @@ -346,6 +346,13 @@ describe('ReactDOMComponent', function() { ); }); + it("should warn about contentEditable and children", function() { + spyOn(console, 'warn'); + mountComponent({ contentEditable: true, children: '' }); + expect(console.warn.argsForCall.length).toBe(1); + expect(console.warn.argsForCall[0][0]).toContain('contentEditable'); + }); + it("should validate against invalid styles", function() { expect(function() { mountComponent({ style: 'display: none' }); @@ -379,6 +386,16 @@ describe('ReactDOMComponent', function() { ); }); + it("should warn about contentEditable and children", function() { + spyOn(console, 'warn'); + React.renderComponent( +
, + container + ); + expect(console.warn.argsForCall.length).toBe(1); + expect(console.warn.argsForCall[0][0]).toContain('contentEditable'); + }); + it("should validate against invalid styles", function() { React.renderComponent(
, container);