From 459cd819b306e74ff13e700015fd3855bbad0f76 Mon Sep 17 00:00:00 2001
From: Geoff Hayes <hayesgm@gmail.com>
Date: Tue, 15 Dec 2015 01:04:04 -0800
Subject: [PATCH 1/2] Have `defaultValue` reach DOM node for html input box for
 #4618

---
 .../dom/client/wrappers/ReactDOMInput.js      |  17 +-
 .../dom/client/wrappers/ReactDOMTextarea.js   |  92 +++++-----
 .../wrappers/__tests__/ReactDOMInput-test.js  |  57 ++++++-
 .../__tests__/ReactDOMTextarea-test.js        | 159 +++++++++++++-----
 .../dom/shared/HTMLDOMPropertyConfig.js       |   4 +-
 .../__tests__/ReactDOMComponent-test.js       |  46 ++---
 6 files changed, 249 insertions(+), 126 deletions(-)

diff --git a/src/renderers/dom/client/wrappers/ReactDOMInput.js b/src/renderers/dom/client/wrappers/ReactDOMInput.js
index f539a73b1c8aa..3c60fe929197c 100644
--- a/src/renderers/dom/client/wrappers/ReactDOMInput.js
+++ b/src/renderers/dom/client/wrappers/ReactDOMInput.js
@@ -76,7 +76,7 @@ var ReactDOMInput = {
     }, DisabledInputUtils.getHostProps(inst, props), {
       defaultChecked: undefined,
       defaultValue: undefined,
-      value: value != null ? value : inst._wrapperState.initialValue,
+      value: value != null ? value : props.defaultValue,
       checked: checked != null ? checked : inst._wrapperState.initialChecked,
       onChange: inst._wrapperState.onChange,
     });
@@ -147,10 +147,8 @@ var ReactDOMInput = {
       warnIfValueIsNull(props);
     }
 
-    var defaultValue = props.defaultValue;
     inst._wrapperState = {
       initialChecked: props.defaultChecked || false,
-      initialValue: defaultValue != null ? defaultValue : null,
       listeners: null,
       onChange: _handleChange.bind(inst),
     };
@@ -216,13 +214,16 @@ var ReactDOMInput = {
 
     var value = LinkedValueUtils.getValue(props);
     if (value != null) {
+      var node = ReactDOMComponentTree.getNodeFromInstance(inst);
+
       // Cast `value` to a string to ensure the value is set correctly. While
       // browsers typically do this as necessary, jsdom doesn't.
-      DOMPropertyOperations.setValueForProperty(
-        ReactDOMComponentTree.getNodeFromInstance(inst),
-        'value',
-        '' + value
-      );
+      var newValue = '' + value;
+
+      // To avoid side effects (such as losing text selection), only set value if changed
+      if (newValue !== node.value) {
+        node.value = newValue;
+      }
     }
   },
 };
diff --git a/src/renderers/dom/client/wrappers/ReactDOMTextarea.js b/src/renderers/dom/client/wrappers/ReactDOMTextarea.js
index 73b24315d6df2..8231ecfa4e6e3 100644
--- a/src/renderers/dom/client/wrappers/ReactDOMTextarea.js
+++ b/src/renderers/dom/client/wrappers/ReactDOMTextarea.js
@@ -12,7 +12,6 @@
 'use strict';
 
 var DisabledInputUtils = require('DisabledInputUtils');
-var DOMPropertyOperations = require('DOMPropertyOperations');
 var LinkedValueUtils = require('LinkedValueUtils');
 var ReactDOMComponentTree = require('ReactDOMComponentTree');
 var ReactUpdates = require('ReactUpdates');
@@ -66,12 +65,46 @@ var ReactDOMTextarea = {
       '`dangerouslySetInnerHTML` does not make sense on <textarea>.'
     );
 
-    // Always set children to the same thing. In IE9, the selection range will
-    // get reset if `textContent` is mutated.
-    var hostProps = Object.assign({}, DisabledInputUtils.getHostProps(inst, props), {
-      defaultValue: undefined,
+    var value = LinkedValueUtils.getValue(props);
+
+    // only bother fetching default value if we're going to use it
+    if (value == null) {
+      var defaultValue = props.defaultValue;
+      // TODO (yungsters): Remove support for children content in <textarea>.
+      var children = props.children;
+      if (children != null) {
+        if (__DEV__) {
+          warning(
+            false,
+            'Use the `defaultValue` or `value` props instead of setting ' +
+            'children on <textarea>.'
+          );
+        }
+        invariant(
+          defaultValue == null,
+          'If you supply `defaultValue` on a <textarea>, do not pass children.'
+        );
+        if (Array.isArray(children)) {
+          invariant(
+            children.length <= 1,
+            '<textarea> can only have at most one child.'
+          );
+          children = children[0];
+        }
+
+        defaultValue = '' + children;
+      }
+      if (defaultValue == null) {
+        defaultValue = '';
+      }
+    }
+
+    // The value can be a boolean or object so that's why it's
+    // forced to be a string.
+    var nativeProps = Object.assign({}, DisabledInputUtils.getHostProps(inst, props), {
+      defaultValue: '' + (value != null ? value : defaultValue),
       value: undefined,
-      children: inst._wrapperState.initialValue,
+      children: undefined,
       onChange: inst._wrapperState.onChange,
     });
 
@@ -110,41 +143,7 @@ var ReactDOMTextarea = {
       warnIfValueIsNull(props);
     }
 
-    var defaultValue = props.defaultValue;
-    // TODO (yungsters): Remove support for children content in <textarea>.
-    var children = props.children;
-    if (children != null) {
-      if (__DEV__) {
-        warning(
-          false,
-          'Use the `defaultValue` or `value` props instead of setting ' +
-          'children on <textarea>.'
-        );
-      }
-      invariant(
-        defaultValue == null,
-        'If you supply `defaultValue` on a <textarea>, do not pass children.'
-      );
-      if (Array.isArray(children)) {
-        invariant(
-          children.length <= 1,
-          '<textarea> can only have at most one child.'
-        );
-        children = children[0];
-      }
-
-      defaultValue = '' + children;
-    }
-    if (defaultValue == null) {
-      defaultValue = '';
-    }
-    var value = LinkedValueUtils.getValue(props);
     inst._wrapperState = {
-      // We save the initial value so that `ReactDOMComponent` doesn't update
-      // `textContent` (unnecessary since we update value).
-      // The initial value can be a boolean or object so that's why it's
-      // forced to be a string.
-      initialValue: '' + (value != null ? value : defaultValue),
       listeners: null,
       onChange: _handleChange.bind(inst),
     };
@@ -159,13 +158,16 @@ var ReactDOMTextarea = {
 
     var value = LinkedValueUtils.getValue(props);
     if (value != null) {
+      var node = ReactDOMComponentTree.getNodeFromInstance(inst);
+
       // Cast `value` to a string to ensure the value is set correctly. While
       // browsers typically do this as necessary, jsdom doesn't.
-      DOMPropertyOperations.setValueForProperty(
-        ReactDOMComponentTree.getNodeFromInstance(inst),
-        'value',
-        '' + value
-      );
+      var newValue = '' + value;
+
+      // To avoid side effects (such as losing text selection), only set value if changed
+      if (newValue !== node.value) {
+        node.value = newValue;
+      }
     }
   },
 };
diff --git a/src/renderers/dom/client/wrappers/__tests__/ReactDOMInput-test.js b/src/renderers/dom/client/wrappers/__tests__/ReactDOMInput-test.js
index 5f0da993e4a95..e68a814a18a84 100644
--- a/src/renderers/dom/client/wrappers/__tests__/ReactDOMInput-test.js
+++ b/src/renderers/dom/client/wrappers/__tests__/ReactDOMInput-test.js
@@ -47,6 +47,7 @@ describe('ReactDOMInput', function() {
     stub = ReactTestUtils.renderIntoDocument(stub);
     var node = ReactDOM.findDOMNode(stub);
 
+    expect(node.getAttribute('value')).toBe('0');
     expect(node.value).toBe('0');
   });
 
@@ -66,6 +67,30 @@ describe('ReactDOMInput', function() {
     expect(node.value).toBe('false');
   });
 
+  it('should update `defaultValue` for uncontrolled input', function() {
+    var container = document.createElement('div');
+
+    var node = ReactDOM.render(<input type="text" defaultValue="0" />, container);
+
+    expect(node.value).toBe('0');
+
+    ReactDOM.render(<input type="text" defaultValue="1" />, container);
+
+    expect(node.value).toBe('1');
+  });
+
+  it('should take `defaultValue` when changing to uncontrolled input', function() {
+    var container = document.createElement('div');
+
+    var node = ReactDOM.render(<input type="text" value="0" readOnly="true" />, container);
+
+    expect(node.value).toBe('0');
+
+    ReactDOM.render(<input type="text" defaultValue="1" />, container);
+
+    expect(node.value).toBe('1');
+  });
+
   it('should display "foobar" for `defaultValue` of `objToString`', function() {
     var objToString = {
       toString: function() {
@@ -91,8 +116,7 @@ describe('ReactDOMInput', function() {
   it('should allow setting `value` to `true`', function() {
     var container = document.createElement('div');
     var stub = <input type="text" value="yolo" onChange={emptyFunction} />;
-    stub = ReactDOM.render(stub, container);
-    var node = ReactDOM.findDOMNode(stub);
+    var node = ReactDOM.render(stub, container);
 
     expect(node.value).toBe('yolo');
 
@@ -106,8 +130,7 @@ describe('ReactDOMInput', function() {
   it('should allow setting `value` to `false`', function() {
     var container = document.createElement('div');
     var stub = <input type="text" value="yolo" onChange={emptyFunction} />;
-    stub = ReactDOM.render(stub, container);
-    var node = ReactDOM.findDOMNode(stub);
+    var node = ReactDOM.render(stub, container);
 
     expect(node.value).toBe('yolo');
 
@@ -121,8 +144,7 @@ describe('ReactDOMInput', function() {
   it('should allow setting `value` to `objToString`', function() {
     var container = document.createElement('div');
     var stub = <input type="text" value="foo" onChange={emptyFunction} />;
-    stub = ReactDOM.render(stub, container);
-    var node = ReactDOM.findDOMNode(stub);
+    var node = ReactDOM.render(stub, container);
 
     expect(node.value).toBe('foo');
 
@@ -138,6 +160,29 @@ describe('ReactDOMInput', function() {
     expect(node.value).toEqual('foobar');
   });
 
+  it('should not incur unnecessary DOM mutations', function() {
+    var container = document.createElement('div');
+    ReactDOM.render(<input value="a" />, container);
+
+    var node = container.firstChild;
+    var nodeValue = 'a'; // node.value always returns undefined
+    var nodeValueSetter = jest.genMockFn();
+    Object.defineProperty(node, 'value', {
+      get: function() {
+        return nodeValue;
+      },
+      set: nodeValueSetter.mockImplementation(function(newValue) {
+        nodeValue = newValue;
+      }),
+    });
+
+    ReactDOM.render(<input value="a" />, container);
+    expect(nodeValueSetter.mock.calls.length).toBe(0);
+
+    ReactDOM.render(<input value="b"/>, container);
+    expect(nodeValueSetter.mock.calls.length).toBe(1);
+  });
+
   it('should properly control a value of number `0`', function() {
     var stub = <input type="text" value={0} onChange={emptyFunction} />;
     stub = ReactTestUtils.renderIntoDocument(stub);
diff --git a/src/renderers/dom/client/wrappers/__tests__/ReactDOMTextarea-test.js b/src/renderers/dom/client/wrappers/__tests__/ReactDOMTextarea-test.js
index 2a67d41c88b1d..303ff107c656e 100644
--- a/src/renderers/dom/client/wrappers/__tests__/ReactDOMTextarea-test.js
+++ b/src/renderers/dom/client/wrappers/__tests__/ReactDOMTextarea-test.js
@@ -27,43 +27,47 @@ describe('ReactDOMTextarea', function() {
     ReactLink = require('ReactLink');
     ReactTestUtils = require('ReactTestUtils');
 
-    renderTextarea = function(component, container) {
+    renderTextarea = function(component, container, skipReplace) {
       if (!container) {
         container = document.createElement('div');
       }
-      var stub = ReactDOM.render(component, container);
-      var node = ReactDOM.findDOMNode(stub);
-      // Fixing jsdom's quirky behavior -- in reality, the parser should strip
-      // off the leading newline but we need to do it by hand here.
-      node.value = node.innerHTML.replace(/^\n/, '');
-      return stub;
+      var node = ReactDOM.render(component, container);
+
+      if (!skipReplace) {
+        // Fixing jsdom's quirky behavior -- in reality, the parser should strip
+        // off the leading newline but we need to do it by hand here.
+        node.value = node.innerHTML.replace(/^\n/, '');
+      }
+      return node;
     };
   });
 
   it('should allow setting `defaultValue`', function() {
     var container = document.createElement('div');
-    var stub = renderTextarea(<textarea defaultValue="giraffe" />, container);
-    var node = ReactDOM.findDOMNode(stub);
+    var node = renderTextarea(<textarea defaultValue="giraffe" />, container, true);
 
     expect(node.value).toBe('giraffe');
 
-    // Changing `defaultValue` should do nothing.
-    stub = renderTextarea(<textarea defaultValue="gorilla" />, container);
-    expect(node.value).toEqual('giraffe');
+    // Changing `defaultValue` should change if no value set.
+    renderTextarea(<textarea defaultValue="gorilla" />, container, true);
+    expect(node.value).toEqual('gorilla');
+
+    node.value = 'cat';
+
+    renderTextarea(<textarea defaultValue="monkey" />, container, true);
+    expect(node.value).toEqual('cat');
   });
 
   it('should display `defaultValue` of number 0', function() {
     var stub = <textarea defaultValue={0} />;
-    stub = renderTextarea(stub);
-    var node = ReactDOM.findDOMNode(stub);
+    var node = renderTextarea(stub);
 
     expect(node.value).toBe('0');
   });
 
   it('should display "false" for `defaultValue` of `false`', function() {
     var stub = <textarea defaultValue={false} />;
-    stub = renderTextarea(stub);
-    var node = ReactDOM.findDOMNode(stub);
+    var node = renderTextarea(stub);
 
     expect(node.value).toBe('false');
   });
@@ -76,24 +80,21 @@ describe('ReactDOMTextarea', function() {
     };
 
     var stub = <textarea defaultValue={objToString} />;
-    stub = renderTextarea(stub);
-    var node = ReactDOM.findDOMNode(stub);
+    var node = renderTextarea(stub);
 
     expect(node.value).toBe('foobar');
   });
 
   it('should not render value as an attribute', function() {
     var stub = <textarea value="giraffe" onChange={emptyFunction} />;
-    stub = renderTextarea(stub);
-    var node = ReactDOM.findDOMNode(stub);
+    var node = renderTextarea(stub);
 
     expect(node.getAttribute('value')).toBe(null);
   });
 
   it('should display `value` of number 0', function() {
     var stub = <textarea value={0} />;
-    stub = renderTextarea(stub);
-    var node = ReactDOM.findDOMNode(stub);
+    var node = renderTextarea(stub);
 
     expect(node.value).toBe('0');
   });
@@ -101,8 +102,7 @@ describe('ReactDOMTextarea', function() {
   it('should allow setting `value` to `giraffe`', function() {
     var container = document.createElement('div');
     var stub = <textarea value="giraffe" onChange={emptyFunction} />;
-    stub = renderTextarea(stub, container);
-    var node = ReactDOM.findDOMNode(stub);
+    var node = renderTextarea(stub, container);
 
     expect(node.value).toBe('giraffe');
 
@@ -116,8 +116,7 @@ describe('ReactDOMTextarea', function() {
   it('should allow setting `value` to `true`', function() {
     var container = document.createElement('div');
     var stub = <textarea value="giraffe" onChange={emptyFunction} />;
-    stub = renderTextarea(stub, container);
-    var node = ReactDOM.findDOMNode(stub);
+    var node = renderTextarea(stub, container);
 
     expect(node.value).toBe('giraffe');
 
@@ -131,8 +130,7 @@ describe('ReactDOMTextarea', function() {
   it('should allow setting `value` to `false`', function() {
     var container = document.createElement('div');
     var stub = <textarea value="giraffe" onChange={emptyFunction} />;
-    stub = renderTextarea(stub, container);
-    var node = ReactDOM.findDOMNode(stub);
+    var node = renderTextarea(stub, container);
 
     expect(node.value).toBe('giraffe');
 
@@ -146,8 +144,7 @@ describe('ReactDOMTextarea', function() {
   it('should allow setting `value` to `objToString`', function() {
     var container = document.createElement('div');
     var stub = <textarea value="giraffe" onChange={emptyFunction} />;
-    stub = renderTextarea(stub, container);
-    var node = ReactDOM.findDOMNode(stub);
+    var node = renderTextarea(stub, container);
 
     expect(node.value).toBe('giraffe');
 
@@ -163,10 +160,58 @@ describe('ReactDOMTextarea', function() {
     expect(node.value).toEqual('foo');
   });
 
+  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);
+
+    expect(node.value).toBe('0');
+
+    ReactDOM.render(<textarea type="text" defaultValue="1" />, container);
+
+    expect(node.value).toBe('1');
+  });
+
+  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);
+
+    expect(node.value).toBe('0');
+
+    spyOn(console, 'error'); // deprecation warning for `children` content
+
+    ReactDOM.render(<textarea type="text">1</textarea>, container);
+
+    expect(node.value).toBe('1');
+  });
+
+  it('should not incur unnecessary DOM mutations', function() {
+    var container = document.createElement('div');
+    ReactDOM.render(<textarea value="a" onChange={emptyFunction} />, container);
+
+    var node = container.firstChild;
+    var nodeValue = 'a'; // node.value always returns undefined
+    var nodeValueSetter = jest.genMockFn();
+    Object.defineProperty(node, 'value', {
+      get: function() {
+        return nodeValue;
+      },
+      set: nodeValueSetter.mockImplementation(function(newValue) {
+        nodeValue = newValue;
+      }),
+    });
+
+    ReactDOM.render(<textarea value="a" onChange={emptyFunction} />, container);
+    expect(nodeValueSetter.mock.calls.length).toBe(0);
+
+    ReactDOM.render(<textarea value="b" onChange={emptyFunction} />, container);
+    expect(nodeValueSetter.mock.calls.length).toBe(1);
+  });
+
   it('should properly control a value of number `0`', function() {
     var stub = <textarea value={0} onChange={emptyFunction} />;
-    stub = renderTextarea(stub);
-    var node = ReactDOM.findDOMNode(stub);
+    var node = renderTextarea(stub);
 
     node.value = 'giraffe';
     ReactTestUtils.Simulate.change(node);
@@ -178,27 +223,54 @@ describe('ReactDOMTextarea', function() {
 
     var container = document.createElement('div');
     var stub = <textarea>giraffe</textarea>;
-    stub = renderTextarea(stub, container);
-    var node = ReactDOM.findDOMNode(stub);
+    var node = renderTextarea(stub, container, true);
 
     expect(console.error.argsForCall.length).toBe(1);
     expect(node.value).toBe('giraffe');
 
-    // Changing children should do nothing, it functions like `defaultValue`.
+    // Changing children should cause value to change (new behavior of `defaultValue`)
     stub = ReactDOM.render(<textarea>gorilla</textarea>, container);
-    expect(node.value).toEqual('giraffe');
+    expect(node.value).toEqual('gorilla');
+  });
+
+  it('should not keep value when switching to uncontrolled element if not changed', function() {
+    var container = document.createElement('div');
+
+    var node = renderTextarea(<textarea value="kitten" onChange={emptyFunction} />, container, true);
+
+    expect(node.value).toBe('kitten');
+
+    ReactDOM.render(<textarea defaultValue="gorilla"></textarea>, container);
+
+    expect(node.value).toEqual('gorilla');
+  });
+
+  it('should keep value when switching to uncontrolled element if changed', function() {
+    var container = document.createElement('div');
+
+    var node = renderTextarea(<textarea value="kitten" onChange={emptyFunction} />, container, true);
+
+    expect(node.value).toBe('kitten');
+
+    ReactDOM.render(<textarea value="puppies" onChange={emptyFunction}></textarea>, container);
+
+    expect(node.value).toBe('puppies');
+
+    ReactDOM.render(<textarea defaultValue="gorilla"></textarea>, container);
+
+    expect(node.value).toEqual('puppies');
   });
 
   it('should allow numbers as children', function() {
     spyOn(console, 'error');
-    var node = ReactDOM.findDOMNode(renderTextarea(<textarea>{17}</textarea>));
+    var node = renderTextarea(<textarea>{17}</textarea>);
     expect(console.error.argsForCall.length).toBe(1);
     expect(node.value).toBe('17');
   });
 
   it('should allow booleans as children', function() {
     spyOn(console, 'error');
-    var node = ReactDOM.findDOMNode(renderTextarea(<textarea>{false}</textarea>));
+    var node = renderTextarea(<textarea>{false}</textarea>);
     expect(console.error.argsForCall.length).toBe(1);
     expect(node.value).toBe('false');
   });
@@ -210,7 +282,7 @@ describe('ReactDOMTextarea', function() {
         return 'sharkswithlasers';
       },
     };
-    var node = ReactDOM.findDOMNode(renderTextarea(<textarea>{obj}</textarea>));
+    var node = renderTextarea(<textarea>{obj}</textarea>);
     expect(console.error.argsForCall.length).toBe(1);
     expect(node.value).toBe('sharkswithlasers');
   });
@@ -228,7 +300,7 @@ describe('ReactDOMTextarea', function() {
 
     var node;
     expect(function() {
-      node = ReactDOM.findDOMNode(renderTextarea(<textarea><strong /></textarea>));
+      node = renderTextarea(<textarea><strong /></textarea>);
     }).not.toThrow();
 
     expect(node.value).toBe('[object Object]');
@@ -248,12 +320,12 @@ describe('ReactDOMTextarea', function() {
     );
 
 
-    expect(ReactDOM.findDOMNode(instance).value).toBe('yolo');
+    expect(instance.value).toBe('yolo');
     expect(link.value).toBe('yolo');
     expect(link.requestChange.mock.calls.length).toBe(0);
 
-    ReactDOM.findDOMNode(instance).value = 'test';
-    ReactTestUtils.Simulate.change(ReactDOM.findDOMNode(instance));
+    instance.value = 'test';
+    ReactTestUtils.Simulate.change(instance);
 
     expect(link.requestChange.mock.calls.length).toBe(1);
     expect(link.requestChange.mock.calls[0][0]).toEqual('test');
@@ -297,4 +369,5 @@ describe('ReactDOMTextarea', function() {
     );
     expect(console.error.argsForCall.length).toBe(1);
   });
+
 });
diff --git a/src/renderers/dom/shared/HTMLDOMPropertyConfig.js b/src/renderers/dom/shared/HTMLDOMPropertyConfig.js
index ce5e93cea6e1a..60f87e2586238 100644
--- a/src/renderers/dom/shared/HTMLDOMPropertyConfig.js
+++ b/src/renderers/dom/shared/HTMLDOMPropertyConfig.js
@@ -15,7 +15,6 @@ var DOMProperty = require('DOMProperty');
 
 var MUST_USE_PROPERTY = DOMProperty.injection.MUST_USE_PROPERTY;
 var HAS_BOOLEAN_VALUE = DOMProperty.injection.HAS_BOOLEAN_VALUE;
-var HAS_SIDE_EFFECTS = DOMProperty.injection.HAS_SIDE_EFFECTS;
 var HAS_NUMERIC_VALUE = DOMProperty.injection.HAS_NUMERIC_VALUE;
 var HAS_POSITIVE_NUMERIC_VALUE =
   DOMProperty.injection.HAS_POSITIVE_NUMERIC_VALUE;
@@ -62,6 +61,7 @@ var HTMLDOMPropertyConfig = {
     data: 0, // For `<object />` acts as `src`.
     dateTime: 0,
     default: HAS_BOOLEAN_VALUE,
+    defaultValue: MUST_USE_PROPERTY,
     defer: HAS_BOOLEAN_VALUE,
     dir: 0,
     disabled: HAS_BOOLEAN_VALUE,
@@ -153,7 +153,7 @@ var HTMLDOMPropertyConfig = {
     // Setting .type throws on non-<input> tags
     type: 0,
     useMap: 0,
-    value: MUST_USE_PROPERTY | HAS_SIDE_EFFECTS,
+    value: 0,
     width: 0,
     wmode: 0,
     wrap: 0,
diff --git a/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js b/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js
index d655574107def..bea3107c37753 100644
--- a/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js
+++ b/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js
@@ -498,30 +498,32 @@ describe('ReactDOMComponent', function() {
       ReactDOM.render(<div value="" />, container);
 
       var node = container.firstChild;
-      var nodeValue = ''; // node.value always returns undefined
-      var nodeValueSetter = jest.fn();
-      Object.defineProperty(node, 'value', {
-        get: function() {
-          return nodeValue;
-        },
-        set: nodeValueSetter.mockImplementation(function(newValue) {
-          nodeValue = newValue;
-        }),
-      });
 
-      function renderWithValueAndExpect(value, expected) {
-        ReactDOM.render(<div value={value} />, container);
-        expect(nodeValueSetter.mock.calls.length).toBe(expected);
-      }
+      var nodeValueSetter = jest.genMockFn();
+
+      var oldSetAttribute = node.setAttribute.bind(node);
+      node.setAttribute = function(key, value) {
+        oldSetAttribute(key, value);
+        nodeValueSetter(key, value);
+      };
+
+      ReactDOM.render(<div value="foo" />, container);
+      expect(nodeValueSetter.mock.calls.length).toBe(1);
 
-      renderWithValueAndExpect(undefined, 0);
-      renderWithValueAndExpect('', 0);
-      renderWithValueAndExpect('foo', 1);
-      renderWithValueAndExpect('foo', 1);
-      renderWithValueAndExpect(undefined, 2);
-      renderWithValueAndExpect(null, 2);
-      renderWithValueAndExpect('', 2);
-      renderWithValueAndExpect(undefined, 2);
+      ReactDOM.render(<div value="foo" />, container);
+      expect(nodeValueSetter.mock.calls.length).toBe(1);
+
+      ReactDOM.render(<div />, container);
+      expect(nodeValueSetter.mock.calls.length).toBe(1);
+
+      ReactDOM.render(<div value={null} />, container);
+      expect(nodeValueSetter.mock.calls.length).toBe(1);
+
+      ReactDOM.render(<div value="" />, container);
+      expect(nodeValueSetter.mock.calls.length).toBe(2);
+
+      ReactDOM.render(<div />, container);
+      expect(nodeValueSetter.mock.calls.length).toBe(2);
     });
 
     it('should not incur unnecessary DOM mutations for boolean properties', function() {

From 079b16a610c11f2b94da3a63550e938014ec53cf Mon Sep 17 00:00:00 2001
From: Jim Sproch <jsproch@fb.com>
Date: Mon, 4 Apr 2016 10:39:07 -0700
Subject: [PATCH 2/2] Cleanup and bug fixes for merge.

---
 .../dom/client/wrappers/ReactDOMInput.js      |  36 ++++++-
 .../dom/client/wrappers/ReactDOMTextarea.js   | 101 +++++++++++-------
 .../wrappers/__tests__/ReactDOMInput-test.js  |  38 ++++++-
 .../__tests__/ReactDOMTextarea-test.js        |  82 +++++++++-----
 .../dom/shared/HTMLDOMPropertyConfig.js       |   1 -
 src/renderers/dom/shared/ReactDOMComponent.js |  21 ++++
 .../__tests__/ReactStatelessComponent-test.js |   2 +-
 7 files changed, 205 insertions(+), 76 deletions(-)

diff --git a/src/renderers/dom/client/wrappers/ReactDOMInput.js b/src/renderers/dom/client/wrappers/ReactDOMInput.js
index 3c60fe929197c..2ce3826c6a17e 100644
--- a/src/renderers/dom/client/wrappers/ReactDOMInput.js
+++ b/src/renderers/dom/client/wrappers/ReactDOMInput.js
@@ -76,7 +76,7 @@ var ReactDOMInput = {
     }, DisabledInputUtils.getHostProps(inst, 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,
     });
@@ -147,8 +147,10 @@ var ReactDOMInput = {
       warnIfValueIsNull(props);
     }
 
+    var defaultValue = props.defaultValue;
     inst._wrapperState = {
-      initialChecked: props.defaultChecked || false,
+      initialChecked: props.checked != null ? props.checked : props.defaultChecked,
+      initialValue: props.value != null ? props.value : defaultValue,
       listeners: null,
       onChange: _handleChange.bind(inst),
     };
@@ -164,13 +166,12 @@ var ReactDOMInput = {
     if (__DEV__) {
       warnIfValueIsNull(props);
 
-      var initialValue = inst._wrapperState.initialChecked || inst._wrapperState.initialValue;
       var defaultValue = props.defaultChecked || props.defaultValue;
       var controlled = props.checked !== undefined || props.value !== undefined;
       var owner = inst._currentElement._owner;
 
       if (
-        (initialValue || !inst._wrapperState.controlled) &&
+        !inst._wrapperState.controlled &&
         controlled && !didWarnUncontrolledToControlled
       ) {
         warning(
@@ -212,9 +213,9 @@ var ReactDOMInput = {
       );
     }
 
+    var node = ReactDOMComponentTree.getNodeFromInstance(inst);
     var value = LinkedValueUtils.getValue(props);
     if (value != null) {
-      var node = ReactDOMComponentTree.getNodeFromInstance(inst);
 
       // Cast `value` to a string to ensure the value is set correctly. While
       // browsers typically do this as necessary, jsdom doesn't.
@@ -224,8 +225,33 @@ var ReactDOMInput = {
       if (newValue !== node.value) {
         node.value = newValue;
       }
+    } else {
+      if (props.value == null && props.defaultValue != null) {
+        node.defaultValue = '' + props.defaultValue;
+      }
+      if (props.checked == null && props.defaultChecked != null) {
+        node.defaultChecked = !!props.defaultChecked;
+      }
     }
   },
+
+  postMountWrapper: function(inst) {
+    // This is in postMount because we need access to the DOM node, which is not
+    // available until after the component has mounted.
+    var node = ReactDOMComponentTree.getNodeFromInstance(inst);
+    node.value = node.value; // Detach value from defaultValue
+
+    // Normally, we'd just do `node.checked = node.checked` upon initial mount, less this bug
+    // this is needed to work around a chrome bug where setting defaultChecked
+    // will sometimes influence the value of checked (even after detachment).
+    // Reference: https://bugs.chromium.org/p/chromium/issues/detail?id=608416
+    // We need to temporarily unset name to avoid disrupting radio button groups.
+    var name = node.name;
+    node.name = undefined;
+    node.defaultChecked = !node.defaultChecked;
+    node.defaultChecked = !node.defaultChecked;
+    node.name = name;
+  },
 };
 
 function _handleChange(event) {
diff --git a/src/renderers/dom/client/wrappers/ReactDOMTextarea.js b/src/renderers/dom/client/wrappers/ReactDOMTextarea.js
index 8231ecfa4e6e3..11190eb3f9c6b 100644
--- a/src/renderers/dom/client/wrappers/ReactDOMTextarea.js
+++ b/src/renderers/dom/client/wrappers/ReactDOMTextarea.js
@@ -65,46 +65,15 @@ var ReactDOMTextarea = {
       '`dangerouslySetInnerHTML` does not make sense on <textarea>.'
     );
 
-    var value = LinkedValueUtils.getValue(props);
-
-    // only bother fetching default value if we're going to use it
-    if (value == null) {
-      var defaultValue = props.defaultValue;
-      // TODO (yungsters): Remove support for children content in <textarea>.
-      var children = props.children;
-      if (children != null) {
-        if (__DEV__) {
-          warning(
-            false,
-            'Use the `defaultValue` or `value` props instead of setting ' +
-            'children on <textarea>.'
-          );
-        }
-        invariant(
-          defaultValue == null,
-          'If you supply `defaultValue` on a <textarea>, do not pass children.'
-        );
-        if (Array.isArray(children)) {
-          invariant(
-            children.length <= 1,
-            '<textarea> can only have at most one child.'
-          );
-          children = children[0];
-        }
-
-        defaultValue = '' + children;
-      }
-      if (defaultValue == null) {
-        defaultValue = '';
-      }
-    }
-
-    // The value can be a boolean or object so that's why it's
-    // forced to be a string.
-    var nativeProps = Object.assign({}, DisabledInputUtils.getHostProps(inst, props), {
-      defaultValue: '' + (value != null ? value : defaultValue),
+    // Always set children to the same thing. In IE9, the selection range will
+    // get reset if `textContent` is mutated.  We could add a check in setTextContent
+    // to only set the value if/when the value differs from the node value (which would
+    // completely solve this IE9 bug), but Sebastian+Ben seemed to like this solution.
+    // The value can be a boolean or object so that's why it's forced to be a string.
+    var hostProps = Object.assign({}, DisabledInputUtils.getHostProps(inst, props), {
       value: undefined,
-      children: undefined,
+      defaultValue: undefined,
+      children: '' + inst._wrapperState.initialValue,
       onChange: inst._wrapperState.onChange,
     });
 
@@ -143,7 +112,45 @@ var ReactDOMTextarea = {
       warnIfValueIsNull(props);
     }
 
+
+    var value = LinkedValueUtils.getValue(props);
+    var initialValue = value;
+
+    // Only bother fetching default value if we're going to use it
+    if (value == null) {
+      var defaultValue = props.defaultValue;
+      // TODO (yungsters): Remove support for children content in <textarea>.
+      var children = props.children;
+      if (children != null) {
+        if (__DEV__) {
+          warning(
+            false,
+            'Use the `defaultValue` or `value` props instead of setting ' +
+            'children on <textarea>.'
+          );
+        }
+        invariant(
+          defaultValue == null,
+          'If you supply `defaultValue` on a <textarea>, do not pass children.'
+        );
+        if (Array.isArray(children)) {
+          invariant(
+            children.length <= 1,
+            '<textarea> can only have at most one child.'
+          );
+          children = children[0];
+        }
+
+        defaultValue = '' + children;
+      }
+      if (defaultValue == null) {
+        defaultValue = '';
+      }
+      initialValue = defaultValue;
+    }
+
     inst._wrapperState = {
+      initialValue: '' + initialValue,
       listeners: null,
       onChange: _handleChange.bind(inst),
     };
@@ -156,10 +163,9 @@ var ReactDOMTextarea = {
       warnIfValueIsNull(props);
     }
 
+    var node = ReactDOMComponentTree.getNodeFromInstance(inst);
     var value = LinkedValueUtils.getValue(props);
     if (value != null) {
-      var node = ReactDOMComponentTree.getNodeFromInstance(inst);
-
       // Cast `value` to a string to ensure the value is set correctly. While
       // browsers typically do this as necessary, jsdom doesn't.
       var newValue = '' + value;
@@ -168,8 +174,21 @@ var ReactDOMTextarea = {
       if (newValue !== node.value) {
         node.value = newValue;
       }
+      if (props.defaultValue == null) {
+        node.defaultValue = newValue;
+      }
+    }
+    if (props.defaultValue != null) {
+      node.defaultValue = props.defaultValue;
     }
   },
+
+  postMountWrapper: function(inst) {
+    // This is in postMount because we need access to the DOM node, which is not
+    // available until after the component has mounted.
+    var node = ReactDOMComponentTree.getNodeFromInstance(inst);
+    node.value = node.value; // Detach value from defaultValue
+  },
 };
 
 function _handleChange(event) {
diff --git a/src/renderers/dom/client/wrappers/__tests__/ReactDOMInput-test.js b/src/renderers/dom/client/wrappers/__tests__/ReactDOMInput-test.js
index e68a814a18a84..7e68c03eb5393 100644
--- a/src/renderers/dom/client/wrappers/__tests__/ReactDOMInput-test.js
+++ b/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;
@@ -35,6 +36,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');
@@ -76,7 +78,8 @@ describe('ReactDOMInput', function() {
 
     ReactDOM.render(<input type="text" defaultValue="1" />, container);
 
-    expect(node.value).toBe('1');
+    expect(node.value).toBe('0');
+    expect(node.defaultValue).toBe('1');
   });
 
   it('should take `defaultValue` when changing to uncontrolled input', function() {
@@ -88,7 +91,24 @@ describe('ReactDOMInput', function() {
 
     ReactDOM.render(<input type="text" defaultValue="1" />, container);
 
-    expect(node.value).toBe('1');
+    expect(node.value).toBe('0');
+  });
+
+  it('should render defaultValue for SSR', function() {
+    var markup = ReactDOMServer.renderToString(<input type="text" defaultValue="1" />);
+    var div = document.createElement('div');
+    div.innerHTML = markup;
+    expect(div.firstChild.getAttribute('value')).toBe('1');
+    expect(div.firstChild.getAttribute('defaultValue')).toBe(null);
+  });
+
+  it('should render value for SSR', function() {
+    var element = <input type="text" value="1" onChange={function() {}} />;
+    var markup = ReactDOMServer.renderToString(element);
+    var div = document.createElement('div');
+    div.innerHTML = markup;
+    expect(div.firstChild.getAttribute('value')).toBe('1');
+    expect(div.firstChild.getAttribute('defaultValue')).toBe(null);
   });
 
   it('should display "foobar" for `defaultValue` of `objToString`', function() {
@@ -165,7 +185,7 @@ describe('ReactDOMInput', function() {
     ReactDOM.render(<input value="a" />, container);
 
     var node = container.firstChild;
-    var nodeValue = 'a'; // node.value always returns undefined
+    var nodeValue = 'a';
     var nodeValueSetter = jest.genMockFn();
     Object.defineProperty(node, 'value', {
       get: function() {
@@ -444,6 +464,13 @@ describe('ReactDOMInput', function() {
 
   });
 
+  it('should update defaultValue to empty string', function() {
+    var container = document.createElement('div');
+    ReactDOM.render(<input type="text" defaultValue={'foo'} />, container);
+    ReactDOM.render(<input type="text" defaultValue={''} />, container);
+    expect(container.firstChild.defaultValue).toBe('');
+  });
+
   it('should throw if both checkedLink and valueLink are provided', function() {
     var node = document.createElement('div');
     var link = new ReactLink(true, jest.fn());
@@ -663,6 +690,11 @@ describe('ReactDOMInput', function() {
       'set data-reactroot',
       'set type',
       'set value',
+      'set value',
+      'set name',
+      'set checked',
+      'set checked',
+      'set name',
     ]);
   });
 
diff --git a/src/renderers/dom/client/wrappers/__tests__/ReactDOMTextarea-test.js b/src/renderers/dom/client/wrappers/__tests__/ReactDOMTextarea-test.js
index 303ff107c656e..1819efa3523aa 100644
--- a/src/renderers/dom/client/wrappers/__tests__/ReactDOMTextarea-test.js
+++ b/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,37 +25,36 @@ describe('ReactDOMTextarea', function() {
   beforeEach(function() {
     React = require('React');
     ReactDOM = require('ReactDOM');
+    ReactDOMServer = require('ReactDOMServer');
     ReactLink = require('ReactLink');
     ReactTestUtils = require('ReactTestUtils');
 
-    renderTextarea = function(component, container, skipReplace) {
+    renderTextarea = function(component, container) {
       if (!container) {
         container = document.createElement('div');
       }
       var node = ReactDOM.render(component, container);
 
-      if (!skipReplace) {
-        // Fixing jsdom's quirky behavior -- in reality, the parser should strip
-        // off the leading newline but we need to do it by hand here.
-        node.value = node.innerHTML.replace(/^\n/, '');
-      }
+      // Fixing jsdom's quirky behavior -- in reality, the parser should strip
+      // off the leading newline but we need to do it by hand here.
+      node.defaultValue = node.innerHTML.replace(/^\n/, '');
       return node;
     };
   });
 
   it('should allow setting `defaultValue`', function() {
     var container = document.createElement('div');
-    var node = renderTextarea(<textarea defaultValue="giraffe" />, container, true);
+    var node = renderTextarea(<textarea defaultValue="giraffe" />, container);
 
     expect(node.value).toBe('giraffe');
 
-    // Changing `defaultValue` should change if no value set.
-    renderTextarea(<textarea defaultValue="gorilla" />, container, true);
-    expect(node.value).toEqual('gorilla');
+    // Changing `defaultValue` should do nothing.
+    renderTextarea(<textarea defaultValue="gorilla" />, container);
+    expect(node.value).toEqual('giraffe');
 
     node.value = 'cat';
 
-    renderTextarea(<textarea defaultValue="monkey" />, container, true);
+    renderTextarea(<textarea defaultValue="monkey" />, container);
     expect(node.value).toEqual('cat');
   });
 
@@ -85,6 +85,14 @@ describe('ReactDOMTextarea', function() {
     expect(node.value).toBe('foobar');
   });
 
+  it('should set defaultValue', function() {
+    var container = document.createElement('div');
+    ReactDOM.render(<textarea defaultValue="foo" />, container);
+    ReactDOM.render(<textarea defaultValue="bar" />, container);
+    ReactDOM.render(<textarea defaultValue="noise" />, container);
+    expect(container.firstChild.defaultValue).toBe('noise');
+  });
+
   it('should not render value as an attribute', function() {
     var stub = <textarea value="giraffe" onChange={emptyFunction} />;
     var node = renderTextarea(stub);
@@ -99,6 +107,13 @@ describe('ReactDOMTextarea', function() {
     expect(node.value).toBe('0');
   });
 
+  it('should update defaultValue to empty string', function() {
+    var container = document.createElement('div');
+    ReactDOM.render(<textarea defaultValue={'foo'} />, container);
+    ReactDOM.render(<textarea defaultValue={''} />, container);
+    expect(container.firstChild.defaultValue).toBe('');
+  });
+
   it('should allow setting `value` to `giraffe`', function() {
     var container = document.createElement('div');
     var stub = <textarea value="giraffe" onChange={emptyFunction} />;
@@ -113,6 +128,23 @@ describe('ReactDOMTextarea', function() {
     expect(node.value).toEqual('gorilla');
   });
 
+  it('should render defaultValue for SSR', function() {
+    var markup = ReactDOMServer.renderToString(<textarea defaultValue="1" />);
+    var div = document.createElement('div');
+    div.innerHTML = markup;
+    expect(div.firstChild.innerHTML).toBe('1');
+    expect(div.firstChild.getAttribute('defaultValue')).toBe(null);
+  });
+
+  it('should render value for SSR', function() {
+    var element = <textarea value="1" onChange={function() {}} />;
+    var markup = ReactDOMServer.renderToString(element);
+    var div = document.createElement('div');
+    div.innerHTML = markup;
+    expect(div.firstChild.innerHTML).toBe('1');
+    expect(div.firstChild.getAttribute('defaultValue')).toBe(null);
+  });
+
   it('should allow setting `value` to `true`', function() {
     var container = document.createElement('div');
     var stub = <textarea value="giraffe" onChange={emptyFunction} />;
@@ -163,27 +195,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() {
@@ -191,7 +223,7 @@ describe('ReactDOMTextarea', function() {
     ReactDOM.render(<textarea value="a" onChange={emptyFunction} />, container);
 
     var node = container.firstChild;
-    var nodeValue = 'a'; // node.value always returns undefined
+    var nodeValue = 'a';
     var nodeValueSetter = jest.genMockFn();
     Object.defineProperty(node, 'value', {
       get: function() {
@@ -223,32 +255,32 @@ describe('ReactDOMTextarea', function() {
 
     var container = document.createElement('div');
     var stub = <textarea>giraffe</textarea>;
-    var node = renderTextarea(stub, container, true);
+    var node = renderTextarea(stub, container);
 
     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() {
+  it('should keep value when switching to uncontrolled element if not changed', function() {
     var container = document.createElement('div');
 
-    var node = renderTextarea(<textarea value="kitten" onChange={emptyFunction} />, container, true);
+    var node = renderTextarea(<textarea value="kitten" onChange={emptyFunction} />, container);
 
     expect(node.value).toBe('kitten');
 
     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() {
     var container = document.createElement('div');
 
-    var node = renderTextarea(<textarea value="kitten" onChange={emptyFunction} />, container, true);
+    var node = renderTextarea(<textarea value="kitten" onChange={emptyFunction} />, container);
 
     expect(node.value).toBe('kitten');
 
diff --git a/src/renderers/dom/shared/HTMLDOMPropertyConfig.js b/src/renderers/dom/shared/HTMLDOMPropertyConfig.js
index 60f87e2586238..f5e0258d293a6 100644
--- a/src/renderers/dom/shared/HTMLDOMPropertyConfig.js
+++ b/src/renderers/dom/shared/HTMLDOMPropertyConfig.js
@@ -61,7 +61,6 @@ var HTMLDOMPropertyConfig = {
     data: 0, // For `<object />` acts as `src`.
     dateTime: 0,
     default: HAS_BOOLEAN_VALUE,
-    defaultValue: MUST_USE_PROPERTY,
     defer: HAS_BOOLEAN_VALUE,
     dir: 0,
     disabled: HAS_BOOLEAN_VALUE,
diff --git a/src/renderers/dom/shared/ReactDOMComponent.js b/src/renderers/dom/shared/ReactDOMComponent.js
index 61dc9f87ad6dd..8e6e2eb2190ea 100644
--- a/src/renderers/dom/shared/ReactDOMComponent.js
+++ b/src/renderers/dom/shared/ReactDOMComponent.js
@@ -241,6 +241,16 @@ function putListener() {
   );
 }
 
+function inputPostMount() {
+  var inst = this;
+  ReactDOMInput.postMountWrapper(inst);
+}
+
+function textareaPostMount() {
+  var inst = this;
+  ReactDOMTextarea.postMountWrapper(inst);
+}
+
 function optionPostMount() {
   var inst = this;
   ReactDOMOption.postMountWrapper(inst);
@@ -623,7 +633,17 @@ ReactDOMComponent.Mixin = {
 
     switch (this._tag) {
       case 'input':
+        transaction.getReactMountReady().enqueue(
+          inputPostMount,
+          this
+        );
+        break;
       case 'textarea':
+        transaction.getReactMountReady().enqueue(
+          textareaPostMount,
+          this
+        );
+        break;
       case 'select':
       case 'button':
         if (props.autoFocus) {
@@ -638,6 +658,7 @@ ReactDOMComponent.Mixin = {
           optionPostMount,
           this
         );
+        break;
     }
 
     return mountImage;
diff --git a/src/renderers/shared/stack/reconciler/__tests__/ReactStatelessComponent-test.js b/src/renderers/shared/stack/reconciler/__tests__/ReactStatelessComponent-test.js
index c5b2744cebddc..fbc9d54fde3f7 100644
--- a/src/renderers/shared/stack/reconciler/__tests__/ReactStatelessComponent-test.js
+++ b/src/renderers/shared/stack/reconciler/__tests__/ReactStatelessComponent-test.js
@@ -108,7 +108,7 @@ describe('ReactStatelessComponent', function() {
     }).toThrow();
     expect(console.error.calls.length).toBe(1);
     expect(console.error.argsForCall[0][0]).toContain(
-      'NotAComponent(...): A valid React element (or null) must be returned. '+
+      'NotAComponent(...): A valid React element (or null) must be returned. ' +
       'You may have returned undefined, an array or some other invalid object.'
     );
   });