Merge pull request #5823 from mgmcdermott/master

Warn when value and defaultValue props are both specified on input or textarea.

Author: jimfb

src/renderers/dom/client/wrappers/ReactDOMInput.js

@@ -25,6 +25,8 @@ var instancesByReactID = {};
 var didWarnValueLink = false;
 var didWarnCheckedLink = false;
 var didWarnValueNull = false;
+var didWarnValueDefaultValue = false;
+var didWarnCheckedDefaultChecked = false;
 
 function forceUpdateIfMounted() {
   if (this._rootNodeID) {
@@ -104,6 +106,28 @@ var ReactDOMInput = {
         );
         didWarnCheckedLink = true;
       }
+      if (props.checked !== undefined && props.defaultChecked !== undefined &&
+        !didWarnCheckedDefaultChecked) {
+        warning(
+          false,
+          'Input elements must be either controlled or uncontrolled (specify either the ' +
+          'checked prop, or the defaultChecked prop, but not both). Decide between using a ' +
+          'controlled or uncontrolled input and remove one of these props. More info: ' +
+          'https://fb.me/react-controlled-components'
+        );
+        didWarnCheckedDefaultChecked = true;
+      }
+      if (props.value !== undefined && props.defaultValue !== undefined &&
+        !didWarnValueDefaultValue) {
+        warning(
+          false,
+          'Input elements must be either controlled or uncontrolled (specify either the value ' +
+          'prop, or the defaultValue prop, but not both). Decide between using a controlled ' +
+          'or uncontrolled input and remove one of these props. More info: ' +
+          'https://fb.me/react-controlled-components'
+        );
+        didWarnValueDefaultValue = true;
+      }
       warnIfValueIsNull(props);
     }
 

src/renderers/dom/client/wrappers/ReactDOMSelect.js

@@ -20,6 +20,7 @@ var warning = require('warning');
 
 var didWarnValueLink = false;
 var didWarnValueNull = false;
+var didWarnValueDefaultValue = false;
 
 function updateOptionsIfPendingUpdateAndMounted() {
   if (this._rootNodeID && this._wrapperState.pendingUpdate) {
@@ -178,6 +179,18 @@ var ReactDOMSelect = {
       onChange: _handleChange.bind(inst),
       wasMultiple: Boolean(props.multiple),
     };
+
+    if (props.value !== undefined && props.defaultValue !== undefined &&
+      !didWarnValueDefaultValue) {
+      warning(
+        false,
+        'Select elements must be either controlled or uncontrolled (specify either the ' +
+        'value prop, or the defaultValue prop, but not both). Decide between using a ' +
+        'controlled or uncontrolled select element and remove one of these props. More info: ' +
+        'https://fb.me/react-controlled-components'
+      );
+      didWarnValueDefaultValue = true;
+    }
   },
 
   getSelectValueContext: function(inst) {

src/renderers/dom/client/wrappers/ReactDOMTextarea.js

@@ -22,6 +22,7 @@ var warning = require('warning');
 
 var didWarnValueLink = false;
 var didWarnValueNull = false;
+var didWarnValDefaultVal = false;
 
 function forceUpdateIfMounted() {
   if (this._rootNodeID) {
@@ -91,6 +92,16 @@ var ReactDOMTextarea = {
         );
         didWarnValueLink = true;
       }
+      if (props.value !== undefined && props.defaultValue !== undefined && !didWarnValDefaultVal) {
+        warning(
+          false,
+          'Textarea elements must be either controlled or uncontrolled (specify either the value ' +
+          'prop, or the defaultValue prop, but not both). Decide between using a controlled or ' +
+          'uncontrolled input and remove one of these props. More info: ' +
+          'https://fb.me/react-controlled-components'
+        );
+        didWarnValDefaultVal = true;
+      }
       warnIfValueIsNull(props);
     }
 

src/renderers/dom/client/wrappers/__tests__/ReactDOMInput-test.js

@@ -415,6 +415,40 @@ describe('ReactDOMInput', function() {
     expect(console.error.argsForCall.length).toBe(1);
   });
 
+  it('should throw warning message if checked and defaultChecked props are specified', function() {
+    ReactTestUtils.renderIntoDocument(
+      <input type="radio" checked={true} defaultChecked={true} readOnly={true} />
+    );
+    expect(console.error.argsForCall[0][0]).toContain(
+      'Input elements must be either controlled or uncontrolled (specify either the ' +
+      'checked prop, or the defaultChecked prop, but not both). Decide between using a ' +
+      'controlled or uncontrolled input and remove one of these props. More info: ' +
+      'https://fb.me/react-controlled-components'
+    );
+
+    ReactTestUtils.renderIntoDocument(
+      <input type="radio" checked={true} defaultChecked={true} readOnly={true} />
+    );
+    expect(console.error.argsForCall.length).toBe(1);
+  });
+
+  it('should throw warning message if value and defaultValue props are specified', function() {
+    ReactTestUtils.renderIntoDocument(
+      <input type="text" value="foo" defaultValue="bar" readOnly={true} />
+    );
+    expect(console.error.argsForCall[0][0]).toContain(
+      'Input elements must be either controlled or uncontrolled (specify either the value ' +
+      'prop, or the defaultValue prop, but not both). Decide between using a controlled or ' +
+      'uncontrolled input and remove one of these props. More info: ' +
+      'https://fb.me/react-controlled-components'
+    );
+
+    ReactTestUtils.renderIntoDocument(
+      <input type="text" value="foo" defaultValue="bar" readOnly={true} />
+    );
+    expect(console.error.argsForCall.length).toBe(1);
+  });
+
   it('sets type before value always', function() {
     var log = [];
     var originalCreateElement = document.createElement;

src/renderers/dom/client/wrappers/__tests__/ReactDOMSelect-test.js

@@ -490,4 +490,30 @@ describe('ReactDOMSelect', function() {
 
     expect(node.value).toBe('giraffe');
   });
+
+  it('should throw warning message if value and defaultValue props are specified', function() {
+    spyOn(console, 'error');
+    ReactTestUtils.renderIntoDocument(
+      <select value="giraffe" defaultValue="giraffe" readOnly={true}>
+        <option value="monkey">A monkey!</option>
+        <option value="giraffe">A giraffe!</option>
+        <option value="gorilla">A gorilla!</option>
+      </select>
+    );
+    expect(console.error.argsForCall[0][0]).toContain(
+      'Select elements must be either controlled or uncontrolled (specify either the ' +
+      'value prop, or the defaultValue prop, but not both). Decide between using a ' +
+      'controlled or uncontrolled select element and remove one of these props. More info: ' +
+      'https://fb.me/react-controlled-components'
+    );
+
+    ReactTestUtils.renderIntoDocument(
+      <select value="giraffe" defaultValue="giraffe" readOnly={true}>
+        <option value="monkey">A monkey!</option>
+        <option value="giraffe">A giraffe!</option>
+        <option value="gorilla">A gorilla!</option>
+      </select>
+    );
+    expect(console.error.argsForCall.length).toBe(1);
+  });
 });

src/renderers/dom/client/wrappers/__tests__/ReactDOMTextarea-test.js

@@ -278,4 +278,22 @@ describe('ReactDOMTextarea', function() {
     ReactTestUtils.renderIntoDocument(<textarea value={null} />);
     expect(console.error.argsForCall.length).toBe(1);
   });
+
+  it('should throw warning message if value and defaultValue are specified', function() {
+    spyOn(console, 'error');
+    ReactTestUtils.renderIntoDocument(
+      <textarea value="foo" defaultValue="bar" readOnly={true} />
+    );
+    expect(console.error.argsForCall[0][0]).toContain(
+      'Textarea elements must be either controlled or uncontrolled (specify either the value ' +
+      'prop, or the defaultValue prop, but not both). Decide between using a controlled or ' +
+      'uncontrolled input and remove one of these props. More info: ' +
+      'https://fb.me/react-controlled-components'
+    );
+
+    ReactTestUtils.renderIntoDocument(
+      <textarea value="foo" defaultValue="bar" readOnly={true} />
+    );
+    expect(console.error.argsForCall.length).toBe(1);
+  });
 });