Don't add top-level events for uncontrolled inputs

src/browser/ui/dom/components/ReactDOMInput.js

@@ -84,7 +84,21 @@ var ReactDOMInput = ReactCompositeComponent.createClass({
     var checked = LinkedValueUtils.getChecked(this);
     props.checked = checked != null ? checked : this.state.initialChecked;
 
-    props.onChange = this._handleChange;
+    // Skip attaching top-level event handlers to an uncontrolled input with no
+    // onChange handler -- in the case of radio buttons, we still need the
+    // handler even if this radio button is "uncontrolled" because clicking A in
+    //   <input type="radio" name="x" value="A" />
+    //   <input type="radio" name="x" value="B" checked={true} />
+    // shouldn't uncheck B. (If we had a "weak listen" operation that put the
+    // listener but didn't attach the handlers to the DOM, we could use that
+    // instead for uncontrolled radios.)
+    if (value != null || checked != null ||
+        LinkedValueUtils.getOnChange(this) != null ||
+        this.props.type === "radio") {
+      props.onChange = this._handleChange;
+    } else {
+      props.onChange = null;
+    }
 
     return input(props, this.props.children);
   },

src/browser/ui/dom/components/ReactDOMSelect.js

@@ -30,11 +30,10 @@ var merge = require('merge');
 // Store a reference to the <select> `ReactDOMComponent`.
 var select = ReactDOM.select;
 
-function updateWithPendingValueIfMounted() {
+function forceUpdateIfMounted() {
   /*jshint validthis:true */
   if (this.isMounted()) {
-    this.setState({value: this._pendingValue});
-    this._pendingValue = 0;
+    this.forceUpdate();
   }
 }
 
@@ -94,6 +93,27 @@ function updateOptions(component, propValue) {
   }
 }
 
+/**
+ * Return the current selection of the <select> element (array of option values
+ * if this.props.multiple, otherwise a single option value).
+ */
+function getSelectedValue(component) {
+  var node = component.getDOMNode();
+  var selectedValue;
+  if (component.props.multiple) {
+    selectedValue = [];
+    var options = node.options;
+    for (var i = 0, l = options.length; i < l; i++) {
+      if (options[i].selected) {
+        selectedValue.push(options[i].value);
+      }
+    }
+  } else {
+    selectedValue = node.value;
+  }
+  return selectedValue;
+}
+
 /**
  * Implements a <select> native component that allows optionally setting the
  * props `value` and `defaultValue`. If `multiple` is false, the prop must be a
@@ -127,35 +147,45 @@ var ReactDOMSelect = ReactCompositeComponent.createClass({
     this._pendingValue = null;
   },
 
-  componentWillReceiveProps: function(nextProps) {
-    if (!this.props.multiple && nextProps.multiple) {
-      this.setState({value: [this.state.value]});
-    } else if (this.props.multiple && !nextProps.multiple) {
-      this.setState({value: this.state.value[0]});
-    }
-  },
-
   render: function() {
     // Clone `this.props` so we don't mutate the input.
     var props = merge(this.props);
 
-    props.onChange = this._handleChange;
     props.value = null;
 
+    // Avoid binding top-level events if only uncontrolled inputs are used
+    if (LinkedValueUtils.getValue(this) != null ||
+        LinkedValueUtils.getOnChange(this) != null) {
+      props.onChange = this._handleChange;
+    } else {
+      props.onChange = null;
+    }
+
     return select(props, this.props.children);
   },
 
   componentDidMount: function() {
     updateOptions(this, LinkedValueUtils.getValue(this));
   },
 
+  componentWillUpdate: function(nextProps) {
+    if (!this.props.multiple && nextProps.multiple) {
+      this._pendingValue = [getSelectedValue(this)];
+    } else if (this.props.multiple && !nextProps.multiple) {
+      this._pendingValue = getSelectedValue(this)[0];
+    }
+  },
+
   componentDidUpdate: function(prevProps) {
     var value = LinkedValueUtils.getValue(this);
     var prevMultiple = !!prevProps.multiple;
     var multiple = !!this.props.multiple;
-    if (value != null || prevMultiple !== multiple) {
+    if (value != null) {
       updateOptions(this, value);
+    } else if (prevMultiple !== multiple) {
+      updateOptions(this, this._pendingValue);
     }
+    this._pendingValue = null;
   },
 
   _handleChange: function(event) {
@@ -165,21 +195,7 @@ var ReactDOMSelect = ReactCompositeComponent.createClass({
       returnValue = onChange.call(this, event);
     }
 
-    var selectedValue;
-    if (this.props.multiple) {
-      selectedValue = [];
-      var options = event.target.options;
-      for (var i = 0, l = options.length; i < l; i++) {
-        if (options[i].selected) {
-          selectedValue.push(options[i].value);
-        }
-      }
-    } else {
-      selectedValue = event.target.value;
-    }
-
-    this._pendingValue = selectedValue;
-    ReactUpdates.setImmediate(updateWithPendingValueIfMounted, this);
+    ReactUpdates.setImmediate(forceUpdateIfMounted, this);
     return returnValue;
   }
 

src/browser/ui/dom/components/ReactDOMTextarea.js

@@ -111,7 +111,14 @@ var ReactDOMTextarea = ReactCompositeComponent.createClass({
 
     props.defaultValue = null;
     props.value = null;
-    props.onChange = this._handleChange;
+
+    // Avoid binding top-level events if only uncontrolled inputs are used
+    if (LinkedValueUtils.getValue(this) != null ||
+        LinkedValueUtils.getOnChange(this) != null) {
+      props.onChange = this._handleChange;
+    } else {
+      props.onChange = null;
+    }
 
     // Always set children to the same thing. In IE9, the selection range will
     // get reset if `textContent` is mutated.