Merge pull request #1520 from syranide/ediblechildren

Warn against contentEditable with children props

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, ' +

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(
+        <div contentEditable><div /></div>,
+        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(<div></div>, container);