Cleanup and bug fixes for merge.

facebook · Apr 5, 2016 · 8c06195 · 8c06195
1 parent 574328a
commit 8c06195
Show file tree

Hide file tree

Showing 6 changed files with 133 additions and 52 deletions.
diff --git a/src/renderers/dom/client/wrappers/ReactDOMInput.js b/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 != null ? props.value : defaultValue,
       listeners: null,
       onChange: _handleChange.bind(inst),
     };
@@ -215,6 +217,21 @@ var ReactDOMInput = {
       if (newValue !== node.value) {
         node.value = newValue;
       }
+    } else {
+      ReactDOMInput.postUpdateWrapper(inst);
+    }
+  },
+
+  postUpdateWrapper: function(inst) {
+    var props = inst._currentElement.props;
+    if (!props.value && props.defaultValue) {
+      invariant(inst._rootNodeID, 'Must be mounted to initialize initial input value');
+      var node = ReactDOMComponentTree.getNodeFromInstance(inst);
+      if (node.defaultValue !== props.defaultValue) {
+        var tmp = node.value;
+        node.defaultValue = ''+props.defaultValue;
+        node.value = tmp;
+      }
     }
   },
 };

diff --git a/src/renderers/dom/client/wrappers/ReactDOMTextarea.js b/src/renderers/dom/client/wrappers/ReactDOMTextarea.js
@@ -66,44 +66,12 @@ var ReactDOMTextarea = {
 
     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({}, props, {
-      defaultValue: '' + (value != null ? value : defaultValue),
       value: undefined,
-      children: undefined,
+      defaultValue: undefined,
+      children: '' + (value != null ? value : inst._wrapperState.initialValue),
       onChange: inst._wrapperState.onChange,
     });
 
@@ -142,7 +110,43 @@ var ReactDOMTextarea = {
       warnIfValueIsNull(props);
     }
 
+
+    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 = '';
+      }
+    }
+
     inst._wrapperState = {
+      initialValue: '' + (value != null ? value : defaultValue),
       listeners: null,
       onChange: _handleChange.bind(inst),
     };
@@ -167,6 +171,20 @@ var ReactDOMTextarea = {
       if (newValue !== node.value) {
         node.value = newValue;
       }
+    } else {
+      ReactDOMTextarea.postUpdateWrapper(inst);
+    }
+  },
+
+  postUpdateWrapper: function(inst) {
+    var props = inst._currentElement.props;
+    if (props.value == null && props.defaultValue) {
+      invariant(inst._rootNodeID, 'Must be mounted to initialize defaultValue');
+      var node = ReactDOMComponentTree.getNodeFromInstance(inst);
+      if (node.defaultValue !== props.defaultValue) {
+        node.value = node.value; // Hack to detach value and defaultValue
+        node.defaultValue = props.defaultValue;
+      }
     }
   },
 };

diff --git 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;
@@ -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() {

diff --git 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,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';
 
@@ -85,6 +87,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);
@@ -113,6 +123,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 +180,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 +245,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 +259,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() {

diff --git a/src/renderers/dom/shared/ReactDOMComponent.js b/src/renderers/dom/shared/ReactDOMComponent.js
@@ -349,6 +349,14 @@ function postUpdateSelectWrapper() {
   ReactDOMSelect.postUpdateWrapper(this);
 }
 
+function postUpdateTextareaWrapper() {
+  ReactDOMTextarea.postUpdateWrapper(this);
+}
+
+function postUpdateInputWrapper() {
+  ReactDOMInput.postUpdateWrapper(this);
+}
+
 // For HTML, certain tags should omit their close tag. We keep a whitelist for
 // those special-case tags.
 
@@ -488,6 +496,7 @@ ReactDOMComponent.Mixin = {
         ReactDOMInput.mountWrapper(this, props, nativeParent);
         props = ReactDOMInput.getNativeProps(this, props);
         transaction.getReactMountReady().enqueue(trapBubbledEventsLocal, this);
+        transaction.getReactMountReady().enqueue(postUpdateInputWrapper, this);
         break;
       case 'option':
         ReactDOMOption.mountWrapper(this, props, nativeParent);
@@ -502,6 +511,7 @@ ReactDOMComponent.Mixin = {
         ReactDOMTextarea.mountWrapper(this, props, nativeParent);
         props = ReactDOMTextarea.getNativeProps(this, props);
         transaction.getReactMountReady().enqueue(trapBubbledEventsLocal, this);
+        transaction.getReactMountReady().enqueue(postUpdateTextareaWrapper, this);
         break;
     }
 
@@ -811,10 +821,20 @@ ReactDOMComponent.Mixin = {
       context
     );
 
-    if (this._tag === 'select') {
-      // <select> value update needs to occur after <option> children
-      // reconciliation
-      transaction.getReactMountReady().enqueue(postUpdateSelectWrapper, this);
+    switch (this._tag) {
+      case 'button':
+        break;
+      case 'input':
+        transaction.getReactMountReady().enqueue(postUpdateInputWrapper, this);
+        break;
+      case 'option':
+        break;
+      case 'select':
+        transaction.getReactMountReady().enqueue(postUpdateSelectWrapper, this);
+        break;
+      case 'textarea':
+        transaction.getReactMountReady().enqueue(postUpdateTextareaWrapper, this);
+        break;
     }
   },
 

diff --git a/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js b/src/renderers/dom/shared/__tests__/ReactDOMComponent-test.js
@@ -492,7 +492,7 @@ describe('ReactDOMComponent', function() {
       node.setAttribute = function(key, value) {
         oldSetAttribute(key, value);
         nodeValueSetter(key, value);
-      }
+      };
 
       ReactDOM.render(<div value="" />, container);
       expect(nodeValueSetter.mock.calls.length).toBe(0);