From 0c6f4b3bcc8dc728f4736e53e3d81d6ae4c47cb9 Mon Sep 17 00:00:00 2001
From: Ben Alpert <spicyjalapeno@gmail.com>
Date: Wed, 12 Jun 2013 00:14:58 -0700
Subject: [PATCH 1/5] Set textarea value when changing content

At http://jsfiddle.net/spicyj/W4QLq/, typing into the textbox would cause
clicking the button to do nothing; now it should work.
---
 src/core/ReactDOM.js                        |  1 +
 src/core/ReactDOMTextarea.js                | 63 ++++++++++++++++++++
 src/core/ReactDefaultInjection.js           |  4 +-
 src/core/__tests__/ReactDOMTextarea-test.js | 66 +++++++++++++++++++++
 4 files changed, 133 insertions(+), 1 deletion(-)
 create mode 100644 src/core/ReactDOMTextarea.js
 create mode 100644 src/core/__tests__/ReactDOMTextarea-test.js

diff --git a/src/core/ReactDOM.js b/src/core/ReactDOM.js
index 2fe78e99a7..a3c470c1ce 100644
--- a/src/core/ReactDOM.js
+++ b/src/core/ReactDOM.js
@@ -115,6 +115,7 @@ var ReactDOM = objMapKeyVal({
   table: false,
   tbody: false,
   td: false,
+  // Danger: this gets monkeypatched! See ReactDOMTextarea for more info.
   textarea: false,
   tfoot: false,
   th: false,
diff --git a/src/core/ReactDOMTextarea.js b/src/core/ReactDOMTextarea.js
new file mode 100644
index 0000000000..d193d7cffe
--- /dev/null
+++ b/src/core/ReactDOMTextarea.js
@@ -0,0 +1,63 @@
+/**
+ * Copyright 2013 Facebook, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * @providesModule ReactDOMTextarea
+ */
+
+"use strict";
+
+var ReactCompositeComponent = require('ReactCompositeComponent');
+var ReactDOM = require('ReactDOM');
+
+var invariant = require('invariant');
+
+// Store a reference to the <textarea> `ReactNativeComponent`.
+var textarea = ReactDOM.textarea;
+
+// For quickly matching children type, to test if can be treated as content.
+var CONTENT_TYPES = {'string': true, 'number': true};
+
+var getTextContent = function(props) {
+  return props.content != null ? '' + props.content :
+    CONTENT_TYPES[typeof props.children] ? '' + props.children : '';
+};
+
+/**
+ * Since setting .textContent on a dirty <textarea> doesn't update its value,
+ * we intercept prop changes here to make sure that value is updated.
+ */
+var ReactDOMTextarea = ReactCompositeComponent.createClass({
+  render: function() {
+    invariant(
+      this.props.dangerouslySetInnerHTML == null,
+      '`dangerouslySetInnerHTML` does not make sense on textarea.'
+    );
+    invariant(
+      this.props.children == null || CONTENT_TYPES[typeof this.props.children],
+      'When present, textarea children must be a single string or number.'
+    );
+    return this.transferPropsTo(textarea(null, this.props.children));
+  },
+
+  componentDidUpdate: function(prevProps, prevState, rootNode) {
+    var oldContent = getTextContent(prevProps);
+    var newContent = getTextContent(this.props);
+    if (oldContent !== newContent) {
+      rootNode.value = newContent;
+    }
+  }
+});
+
+module.exports = ReactDOMTextarea;
diff --git a/src/core/ReactDefaultInjection.js b/src/core/ReactDefaultInjection.js
index 75044d849f..4e68d8fa6b 100644
--- a/src/core/ReactDefaultInjection.js
+++ b/src/core/ReactDefaultInjection.js
@@ -20,6 +20,7 @@
 
 var ReactDOM = require('ReactDOM');
 var ReactDOMForm = require('ReactDOMForm');
+var ReactDOMTextarea = require('ReactDOMTextarea');
 
 var DefaultEventPluginOrder = require('DefaultEventPluginOrder');
 var EnterLeaveEventPlugin = require('EnterLeaveEventPlugin');
@@ -50,7 +51,8 @@ function inject() {
    * dependency graph we need to inject it here.
    */
   ReactDOM.injection.injectComponentClasses({
-    form: ReactDOMForm
+    form: ReactDOMForm,
+    textarea: ReactDOMTextarea
   });
 }
 
diff --git a/src/core/__tests__/ReactDOMTextarea-test.js b/src/core/__tests__/ReactDOMTextarea-test.js
new file mode 100644
index 0000000000..00f7bed92d
--- /dev/null
+++ b/src/core/__tests__/ReactDOMTextarea-test.js
@@ -0,0 +1,66 @@
+/**
+ * Copyright 2013 Facebook, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * @jsx React.DOM
+ * @emails react-core
+ */
+
+"use strict";
+
+describe('ReactDOMTextarea', function() {
+  var React;
+  var ReactTestUtils;
+  var transaction;
+
+  beforeEach(function() {
+    React = require('React');
+    ReactTestUtils = require('ReactTestUtils');
+
+    var ReactReconcileTransaction = require('ReactReconcileTransaction');
+    transaction = new ReactReconcileTransaction();
+  });
+
+  it("should remove value with removed children", function() {
+    var stub = ReactTestUtils.renderIntoDocument(<textarea>giraffe</textarea>);
+
+    expect(stub.getDOMNode().value).toEqual('giraffe');
+    stub.receiveProps({ children: null }, transaction);
+    expect(stub.getDOMNode().value).toEqual('');
+  });
+
+  it("should update value with a single string child", function() {
+    var stub = ReactTestUtils.renderIntoDocument(<textarea>monkey</textarea>);
+
+    expect(stub.getDOMNode().value).toEqual('monkey');
+    stub.receiveProps({ children: 'gorilla' }, transaction);
+    expect(stub.getDOMNode().value).toEqual('gorilla');
+  });
+
+  it("should update value with a single numerical child", function() {
+    var stub = ReactTestUtils.renderIntoDocument(<textarea>17</textarea>);
+
+    expect(stub.getDOMNode().value).toEqual('17');
+    stub.receiveProps({ children: 289 }, transaction);
+    expect(stub.getDOMNode().value).toEqual('289');
+  });
+
+  it("should update value with the content property", function() {
+    var stub = ReactTestUtils.renderIntoDocument(<textarea content="purple" />);
+
+    expect(stub.getDOMNode().value).toEqual('purple');
+    stub.receiveProps({ content: 'eggplant' }, transaction);
+    expect(stub.getDOMNode().value).toEqual('eggplant');
+  });
+});

From d13a37ce22503fc476a3a008be3ed31b418e283f Mon Sep 17 00:00:00 2001
From: Ben Alpert <spicyjalapeno@gmail.com>
Date: Wed, 12 Jun 2013 01:55:26 -0700
Subject: [PATCH 2/5] Don't set value if it'll be a noop

---
 src/core/ReactDOMTextarea.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/core/ReactDOMTextarea.js b/src/core/ReactDOMTextarea.js
index d193d7cffe..f7c9eaae30 100644
--- a/src/core/ReactDOMTextarea.js
+++ b/src/core/ReactDOMTextarea.js
@@ -54,7 +54,7 @@ var ReactDOMTextarea = ReactCompositeComponent.createClass({
   componentDidUpdate: function(prevProps, prevState, rootNode) {
     var oldContent = getTextContent(prevProps);
     var newContent = getTextContent(this.props);
-    if (oldContent !== newContent) {
+    if (oldContent !== newContent && rootNode.value !== newContent) {
       rootNode.value = newContent;
     }
   }

From ddc4ffffa06a531becb04f4c30b9dd91c5301c53 Mon Sep 17 00:00:00 2001
From: Ben Alpert <spicyjalapeno@gmail.com>
Date: Wed, 12 Jun 2013 19:12:52 -0700
Subject: [PATCH 3/5] Don't let textarea value change via textContent

Turns out my tests before weren't particularly useful because
receiveProps doesn't end up running componentDidUpdate since the
transaction never finishes. Now they use replaceProps instead (and I
verified that commenting out the "rootNode.value = ..." line makes the
tests fail, which wasn't true before).
---
 src/core/ReactDOMTextarea.js                | 16 ++++++++++++++--
 src/core/__tests__/ReactDOMTextarea-test.js | 11 ++++-------
 2 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/core/ReactDOMTextarea.js b/src/core/ReactDOMTextarea.js
index f7c9eaae30..f484da01cb 100644
--- a/src/core/ReactDOMTextarea.js
+++ b/src/core/ReactDOMTextarea.js
@@ -39,6 +39,16 @@ var getTextContent = function(props) {
  * we intercept prop changes here to make sure that value is updated.
  */
 var ReactDOMTextarea = ReactCompositeComponent.createClass({
+  getInitialState: function() {
+    // We keep the original value of content and children here so that
+    // ReactNativeComponent doesn't update textContent (unnecessary since we
+    // update value).
+    return {
+      initialContent: this.props.content,
+      initialChildren: this.props.children
+    };
+  },
+
   render: function() {
     invariant(
       this.props.dangerouslySetInnerHTML == null,
@@ -48,13 +58,15 @@ var ReactDOMTextarea = ReactCompositeComponent.createClass({
       this.props.children == null || CONTENT_TYPES[typeof this.props.children],
       'When present, textarea children must be a single string or number.'
     );
-    return this.transferPropsTo(textarea(null, this.props.children));
+    return this.transferPropsTo(textarea({
+      content: this.state.initialContent
+    }, this.state.initialChildren));
   },
 
   componentDidUpdate: function(prevProps, prevState, rootNode) {
     var oldContent = getTextContent(prevProps);
     var newContent = getTextContent(this.props);
-    if (oldContent !== newContent && rootNode.value !== newContent) {
+    if (oldContent !== newContent) {
       rootNode.value = newContent;
     }
   }
diff --git a/src/core/__tests__/ReactDOMTextarea-test.js b/src/core/__tests__/ReactDOMTextarea-test.js
index 00f7bed92d..1fb6d97820 100644
--- a/src/core/__tests__/ReactDOMTextarea-test.js
+++ b/src/core/__tests__/ReactDOMTextarea-test.js
@@ -27,16 +27,13 @@ describe('ReactDOMTextarea', function() {
   beforeEach(function() {
     React = require('React');
     ReactTestUtils = require('ReactTestUtils');
-
-    var ReactReconcileTransaction = require('ReactReconcileTransaction');
-    transaction = new ReactReconcileTransaction();
   });
 
   it("should remove value with removed children", function() {
     var stub = ReactTestUtils.renderIntoDocument(<textarea>giraffe</textarea>);
 
     expect(stub.getDOMNode().value).toEqual('giraffe');
-    stub.receiveProps({ children: null }, transaction);
+    stub.replaceProps({ children: null });
     expect(stub.getDOMNode().value).toEqual('');
   });
 
@@ -44,7 +41,7 @@ describe('ReactDOMTextarea', function() {
     var stub = ReactTestUtils.renderIntoDocument(<textarea>monkey</textarea>);
 
     expect(stub.getDOMNode().value).toEqual('monkey');
-    stub.receiveProps({ children: 'gorilla' }, transaction);
+    stub.replaceProps({ children: 'gorilla' });
     expect(stub.getDOMNode().value).toEqual('gorilla');
   });
 
@@ -52,7 +49,7 @@ describe('ReactDOMTextarea', function() {
     var stub = ReactTestUtils.renderIntoDocument(<textarea>17</textarea>);
 
     expect(stub.getDOMNode().value).toEqual('17');
-    stub.receiveProps({ children: 289 }, transaction);
+    stub.replaceProps({ children: 289 });
     expect(stub.getDOMNode().value).toEqual('289');
   });
 
@@ -60,7 +57,7 @@ describe('ReactDOMTextarea', function() {
     var stub = ReactTestUtils.renderIntoDocument(<textarea content="purple" />);
 
     expect(stub.getDOMNode().value).toEqual('purple');
-    stub.receiveProps({ content: 'eggplant' }, transaction);
+    stub.replaceProps({ content: 'eggplant' });
     expect(stub.getDOMNode().value).toEqual('eggplant');
   });
 });

From 0493b27222bd8da9b724b46200bf393c120b1ec9 Mon Sep 17 00:00:00 2001
From: Ben Alpert <spicyjalapeno@gmail.com>
Date: Thu, 13 Jun 2013 20:27:36 -0700
Subject: [PATCH 4/5] Don't update value or textContent unnecessarily

_updateDOMChildren was already updating textContent so we don't need to
do it in _updateDOMProperties. Additionally, don't update .value if
it'll be a noop because it has side-effects (like moving the cursor) in
some browsers (like IE 9).

Refactor tests to be a bit more robust and a bit cleaner too.
---
 src/core/ReactDOMTextarea.js                | 47 ++++++++++-----
 src/core/ReactNativeComponent.js            | 10 ++--
 src/core/__tests__/ReactDOMTextarea-test.js | 63 ++++++++++++++-------
 3 files changed, 78 insertions(+), 42 deletions(-)

diff --git a/src/core/ReactDOMTextarea.js b/src/core/ReactDOMTextarea.js
index f484da01cb..a9f22e0b65 100644
--- a/src/core/ReactDOMTextarea.js
+++ b/src/core/ReactDOMTextarea.js
@@ -30,8 +30,34 @@ var textarea = ReactDOM.textarea;
 var CONTENT_TYPES = {'string': true, 'number': true};
 
 var getTextContent = function(props) {
-  return props.content != null ? '' + props.content :
-    CONTENT_TYPES[typeof props.children] ? '' + props.children : '';
+  if (!props) {
+    return '';
+  }
+
+  invariant(
+    props.dangerouslySetInnerHTML == null,
+    '`dangerouslySetInnerHTML` does not make sense on textarea.'
+  );
+
+  var content;
+  if (Array.isArray(props.children)) {
+    invariant(
+      props.children.length <= 1,
+      'textarea can have at most one child'
+    );
+    content = props.children[0];
+  } else if (props.children != null) {
+    content = props.children;
+  } else {
+    content = props.content;
+  }
+
+  invariant(
+    content == null || CONTENT_TYPES[typeof content],
+    'textarea must contain a single string or number, not an array or ' +
+    'object.'
+  );
+  return content != null ? '' + content : '';
 };
 
 /**
@@ -40,33 +66,24 @@ var getTextContent = function(props) {
  */
 var ReactDOMTextarea = ReactCompositeComponent.createClass({
   getInitialState: function() {
-    // We keep the original value of content and children here so that
+    // We keep the original value of content or children here so that
     // ReactNativeComponent doesn't update textContent (unnecessary since we
     // update value).
     return {
-      initialContent: this.props.content,
-      initialChildren: this.props.children
+      initialContent: getTextContent(this.props)
     };
   },
 
   render: function() {
-    invariant(
-      this.props.dangerouslySetInnerHTML == null,
-      '`dangerouslySetInnerHTML` does not make sense on textarea.'
-    );
-    invariant(
-      this.props.children == null || CONTENT_TYPES[typeof this.props.children],
-      'When present, textarea children must be a single string or number.'
-    );
     return this.transferPropsTo(textarea({
       content: this.state.initialContent
-    }, this.state.initialChildren));
+    }));
   },
 
   componentDidUpdate: function(prevProps, prevState, rootNode) {
     var oldContent = getTextContent(prevProps);
     var newContent = getTextContent(this.props);
-    if (oldContent !== newContent) {
+    if (oldContent !== newContent && rootNode.value !== newContent) {
       rootNode.value = newContent;
     }
   }
diff --git a/src/core/ReactNativeComponent.js b/src/core/ReactNativeComponent.js
index 07371b2c8f..91f63ae71d 100644
--- a/src/core/ReactNativeComponent.js
+++ b/src/core/ReactNativeComponent.js
@@ -219,12 +219,13 @@ ReactNativeComponent.Mixin = {
             styleUpdates[styleName] = '';
           }
         }
-      } else if (propKey === DANGEROUSLY_SET_INNER_HTML ||
-                 propKey === CONTENT) {
+      } else if (propKey === DANGEROUSLY_SET_INNER_HTML) {
         ReactComponent.DOMIDOperations.updateTextContentByID(
           this._rootNodeID,
           ''
         );
+      } else if (propKey === CONTENT) {
+        // (Removal happens in _updateDOMChildren)
       } else if (registrationNames[propKey]) {
         deleteListener(this._rootNodeID, propKey);
       } else {
@@ -275,10 +276,7 @@ ReactNativeComponent.Mixin = {
           );
         }
       } else if (propKey === CONTENT) {
-        ReactComponent.DOMIDOperations.updateTextContentByID(
-          this._rootNodeID,
-          '' + nextProp
-        );
+        // (Update happens in _updateDOMChildren)
       } else if (registrationNames[propKey]) {
         putListener(this._rootNodeID, propKey, nextProp);
       } else {
diff --git a/src/core/__tests__/ReactDOMTextarea-test.js b/src/core/__tests__/ReactDOMTextarea-test.js
index 1fb6d97820..0e600625c6 100644
--- a/src/core/__tests__/ReactDOMTextarea-test.js
+++ b/src/core/__tests__/ReactDOMTextarea-test.js
@@ -19,45 +19,66 @@
 
 "use strict";
 
+var mocks = require('mocks');
+
 describe('ReactDOMTextarea', function() {
   var React;
   var ReactTestUtils;
-  var transaction;
+  var getTextContentAccessor;
 
   beforeEach(function() {
     React = require('React');
     ReactTestUtils = require('ReactTestUtils');
+    getTextContentAccessor = require('getTextContentAccessor');
   });
 
-  it("should remove value with removed children", function() {
+  it("should update value and not update textContent", function() {
+    var textContentAccessor = getTextContentAccessor();
     var stub = ReactTestUtils.renderIntoDocument(<textarea>giraffe</textarea>);
+    var node = stub.getDOMNode();
 
-    expect(stub.getDOMNode().value).toEqual('giraffe');
-    stub.replaceProps({ children: null });
-    expect(stub.getDOMNode().value).toEqual('');
-  });
+    var nodeText = node[textContentAccessor];
+    var nodeTextSetter = mocks.getMockFunction();
+    Object.defineProperty(node, textContentAccessor, {
+      get: function() {
+        return nodeText;
+      },
+      set: nodeTextSetter.mockImplementation(function(newText) {
+        nodeText = newText;
+      })
+    });
 
-  it("should update value with a single string child", function() {
-    var stub = ReactTestUtils.renderIntoDocument(<textarea>monkey</textarea>);
+    expect(node.value).toEqual('giraffe');
 
-    expect(stub.getDOMNode().value).toEqual('monkey');
     stub.replaceProps({ children: 'gorilla' });
-    expect(stub.getDOMNode().value).toEqual('gorilla');
-  });
+    expect(node.value).toEqual('gorilla');
 
-  it("should update value with a single numerical child", function() {
-    var stub = ReactTestUtils.renderIntoDocument(<textarea>17</textarea>);
+    stub.replaceProps({ children: 17 });
+    expect(node.value).toEqual('17');
 
-    expect(stub.getDOMNode().value).toEqual('17');
-    stub.replaceProps({ children: 289 });
-    expect(stub.getDOMNode().value).toEqual('289');
-  });
+    stub.replaceProps({ children: [42] });
+    expect(node.value).toEqual('42');
 
-  it("should update value with the content property", function() {
-    var stub = ReactTestUtils.renderIntoDocument(<textarea content="purple" />);
+    stub.replaceProps({ children: null });
+    expect(node.value).toEqual('');
 
-    expect(stub.getDOMNode().value).toEqual('purple');
     stub.replaceProps({ content: 'eggplant' });
-    expect(stub.getDOMNode().value).toEqual('eggplant');
+    expect(node.value).toEqual('eggplant');
+
+    expect(nodeTextSetter.mock.calls.length).toBe(0);
+  });
+
+  it("should throw with multiple or invalid children", function() {
+    expect(function() {
+      var stub = ReactTestUtils.renderIntoDocument(
+        <textarea>{'hello'}{'there'}</textarea>
+      );
+    }).toThrow();
+
+    expect(function() {
+      var stub = ReactTestUtils.renderIntoDocument(
+        <textarea><strong /></textarea>
+      );
+    }).toThrow();
   });
 });

From ac5320e8871e87a01d22a69e2d9dc1ab7f781515 Mon Sep 17 00:00:00 2001
From: Ben Alpert <spicyjalapeno@gmail.com>
Date: Wed, 19 Jun 2013 17:26:29 -0700
Subject: [PATCH 5/5] Remove textContent tests; they break in phantomjs

---
 src/core/__tests__/ReactDOMTextarea-test.js | 19 +------------------
 1 file changed, 1 insertion(+), 18 deletions(-)

diff --git a/src/core/__tests__/ReactDOMTextarea-test.js b/src/core/__tests__/ReactDOMTextarea-test.js
index 0e600625c6..0ed7417d6a 100644
--- a/src/core/__tests__/ReactDOMTextarea-test.js
+++ b/src/core/__tests__/ReactDOMTextarea-test.js
@@ -19,8 +19,6 @@
 
 "use strict";
 
-var mocks = require('mocks');
-
 describe('ReactDOMTextarea', function() {
   var React;
   var ReactTestUtils;
@@ -29,25 +27,12 @@ describe('ReactDOMTextarea', function() {
   beforeEach(function() {
     React = require('React');
     ReactTestUtils = require('ReactTestUtils');
-    getTextContentAccessor = require('getTextContentAccessor');
   });
 
-  it("should update value and not update textContent", function() {
-    var textContentAccessor = getTextContentAccessor();
+  it("should update value", function() {
     var stub = ReactTestUtils.renderIntoDocument(<textarea>giraffe</textarea>);
     var node = stub.getDOMNode();
 
-    var nodeText = node[textContentAccessor];
-    var nodeTextSetter = mocks.getMockFunction();
-    Object.defineProperty(node, textContentAccessor, {
-      get: function() {
-        return nodeText;
-      },
-      set: nodeTextSetter.mockImplementation(function(newText) {
-        nodeText = newText;
-      })
-    });
-
     expect(node.value).toEqual('giraffe');
 
     stub.replaceProps({ children: 'gorilla' });
@@ -64,8 +49,6 @@ describe('ReactDOMTextarea', function() {
 
     stub.replaceProps({ content: 'eggplant' });
     expect(node.value).toEqual('eggplant');
-
-    expect(nodeTextSetter.mock.calls.length).toBe(0);
   });
 
   it("should throw with multiple or invalid children", function() {