Cleanup and bug fixes for merge.

Author: jim

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

@@ -75,7 +75,7 @@ var ReactDOMInput = {
     }, props, {
       defaultChecked: undefined,
       defaultValue: undefined,
-      value: value != null ? value : props.defaultValue,
+      value: value != null ? value : inst._wrapperState.initialValue,
       checked: checked != null ? checked : inst._wrapperState.initialChecked,
       onChange: inst._wrapperState.onChange,
     });
@@ -138,8 +138,10 @@ var ReactDOMInput = {
       warnIfValueIsNull(props);
     }
 
+    var defaultValue = props.defaultValue;
     inst._wrapperState = {
       initialChecked: props.defaultChecked || false,
+      initialValue: props.value ? props.value : defaultValue,
       listeners: null,
       onChange: _handleChange.bind(inst),
     };

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

@@ -100,10 +100,11 @@ var ReactDOMTextarea = {
 
     // The value can be a boolean or object so that's why it's
     // forced to be a string.
+    defaultValue = '' + (value != null ? value : defaultValue);
     var nativeProps = Object.assign({}, props, {
-      defaultValue: '' + (value != null ? value : defaultValue),
+      defaultValue: defaultValue,
       value: undefined,
-      children: undefined,
+      children: defaultValue,
       onChange: inst._wrapperState.onChange,
     });
 

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

@@ -18,6 +18,7 @@ describe('ReactDOMInput', function() {
   var EventConstants;
   var React;
   var ReactDOM;
+  var ReactDOMServer;
   var ReactDOMFeatureFlags;
   var ReactLink;
   var ReactTestUtils;
@@ -27,6 +28,7 @@ describe('ReactDOMInput', function() {
     EventConstants = require('EventConstants');
     React = require('React');
     ReactDOM = require('ReactDOM');
+    ReactDOMServer = require('ReactDOMServer');
     ReactDOMFeatureFlags = require('ReactDOMFeatureFlags');
     ReactLink = require('ReactLink');
     ReactTestUtils = require('ReactTestUtils');
@@ -67,7 +69,7 @@ describe('ReactDOMInput', function() {
 
     ReactDOM.render(<input type="text" defaultValue="1" />, container);
 
-    expect(node.value).toBe('1');
+    expect(node.value).toBe('0');
   });
 
   it('should take `defaultValue` when changing to uncontrolled input', function() {
@@ -79,7 +81,14 @@ describe('ReactDOMInput', function() {
 
     ReactDOM.render(<input type="text" defaultValue="1" />, container);
 
-    expect(node.value).toBe('1');
+    expect(node.value).toBe('0');
+  });
+
+  it('should render value for SSR', function() {
+    var image = ReactDOMServer.renderToString(<input type="text" defaultValue="1" />);
+    var div = document.createElement('div');
+    div.innerHTML = image;
+    expect(div.firstChild.getAttribute('value')).toBe('1');
   });
 
   it('should display "foobar" for `defaultValue` of `objToString`', function() {

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

@@ -16,6 +16,7 @@ var emptyFunction = require('emptyFunction');
 describe('ReactDOMTextarea', function() {
   var React;
   var ReactDOM;
+  var ReactDOMServer;
   var ReactLink;
   var ReactTestUtils;
 
@@ -24,6 +25,7 @@ describe('ReactDOMTextarea', function() {
   beforeEach(function() {
     React = require('React');
     ReactDOM = require('ReactDOM');
+    ReactDOMServer = require('ReactDOMServer');
     ReactLink = require('ReactLink');
     ReactTestUtils = require('ReactTestUtils');
 
@@ -50,7 +52,7 @@ describe('ReactDOMTextarea', function() {
 
     // Changing `defaultValue` should change if no value set.
     renderTextarea(<textarea defaultValue="gorilla" />, container, true);
-    expect(node.value).toEqual('gorilla');
+    expect(node.value).toEqual('giraffe');
 
     node.value = 'cat';
 
@@ -113,6 +115,13 @@ describe('ReactDOMTextarea', function() {
     expect(node.value).toEqual('gorilla');
   });
 
+  it('should render value for SSR', function() {
+    var image = ReactDOMServer.renderToString(<textarea defaultValue="1" />);
+    var div = document.createElement('div');
+    div.innerHTML = image;
+    expect(div.firstChild.innerHTML).toBe('1');
+  });
+
   it('should allow setting `value` to `true`', function() {
     var container = document.createElement('div');
     var stub = <textarea value="giraffe" onChange={emptyFunction} />;
@@ -163,27 +172,27 @@ describe('ReactDOMTextarea', function() {
   it('should take updates to `defaultValue` for uncontrolled textarea', function() {
     var container = document.createElement('div');
 
-    var node = ReactDOM.render(<textarea type="text" defaultValue="0" />, container);
+    var node = ReactDOM.render(<textarea defaultValue="0" />, container);
 
     expect(node.value).toBe('0');
 
-    ReactDOM.render(<textarea type="text" defaultValue="1" />, container);
+    ReactDOM.render(<textarea defaultValue="1" />, container);
 
-    expect(node.value).toBe('1');
+    expect(node.value).toBe('0');
   });
 
   it('should take updates to children in lieu of `defaultValue` for uncontrolled textarea', function() {
     var container = document.createElement('div');
 
-    var node = ReactDOM.render(<textarea type="text" defaultValue="0" />, container);
+    var node = ReactDOM.render(<textarea defaultValue="0" />, container);
 
     expect(node.value).toBe('0');
 
     spyOn(console, 'error'); // deprecation warning for `children` content
 
-    ReactDOM.render(<textarea type="text">1</textarea>, container);
+    ReactDOM.render(<textarea>1</textarea>, container);
 
-    expect(node.value).toBe('1');
+    expect(node.value).toBe('0');
   });
 
   it('should not incur unnecessary DOM mutations', function() {
@@ -228,9 +237,9 @@ describe('ReactDOMTextarea', function() {
     expect(console.error.argsForCall.length).toBe(1);
     expect(node.value).toBe('giraffe');
 
-    // Changing children should cause value to change (new behavior of `defaultValue`)
+    // Changing children should do nothing, it functions like `defaultValue`.
     stub = ReactDOM.render(<textarea>gorilla</textarea>, container);
-    expect(node.value).toEqual('gorilla');
+    expect(node.value).toEqual('giraffe');
   });
 
   it('should not keep value when switching to uncontrolled element if not changed', function() {
@@ -242,7 +251,7 @@ describe('ReactDOMTextarea', function() {
 
     ReactDOM.render(<textarea defaultValue="gorilla"></textarea>, container);
 
-    expect(node.value).toEqual('gorilla');
+    expect(node.value).toEqual('kitten');
   });
 
   it('should keep value when switching to uncontrolled element if changed', function() {

src/renderers/dom/shared/DOMPropertyOperations.js

@@ -153,7 +153,16 @@ var DOMPropertyOperations = {
             ('' + node[propName]) !== ('' + value)) {
           // Contrary to `setAttribute`, object properties are properly
           // `toString`ed by IE8/9.
-          node[propName] = value;
+
+          if (propName === 'defaultValue' && (node._tag === 'textarea' || node._tag === 'input')) {
+            // defaultValue is a special property because it can perturb the value property
+            var tmp = node.value;
+            node[propName] = value;
+            node.value = tmp;
+          }
+          else {
+            node[propName] = value;
+          }
         }
       } else {
         var attributeName = propertyInfo.attributeName;

src/renderers/dom/shared/ReactDOMComponent.js

@@ -345,6 +345,13 @@ function trapBubbledEventsLocal() {
   }
 }
 
+function initializeInitialInputValue() {
+  var inst = this;
+  invariant(inst._rootNodeID, 'Must be mounted to initialize initial input value');
+  var node = getNode(inst);
+  node.value = node.defaultValue;
+}
+
 function postUpdateSelectWrapper() {
   ReactDOMSelect.postUpdateWrapper(this);
 }
@@ -488,6 +495,9 @@ ReactDOMComponent.Mixin = {
         ReactDOMInput.mountWrapper(this, props, nativeParent);
         props = ReactDOMInput.getNativeProps(this, props);
         transaction.getReactMountReady().enqueue(trapBubbledEventsLocal, this);
+        if (!props.value && props.defaultValue) {
+          transaction.getReactMountReady().enqueue(initializeInitialInputValue, this);
+        }
         break;
       case 'option':
         ReactDOMOption.mountWrapper(this, props, nativeParent);
@@ -502,6 +512,9 @@ ReactDOMComponent.Mixin = {
         ReactDOMTextarea.mountWrapper(this, props, nativeParent);
         props = ReactDOMTextarea.getNativeProps(this, props);
         transaction.getReactMountReady().enqueue(trapBubbledEventsLocal, this);
+        if (!props.value && props.defaultValue) {
+          transaction.getReactMountReady().enqueue(initializeInitialInputValue, this);
+        }
         break;
     }