From 31794f5f9f03d228d4f0597c539da75a6df1fec9 Mon Sep 17 00:00:00 2001
From: jquense <monastic.panic@gmail.com>
Date: Wed, 6 May 2015 12:55:26 -0400
Subject: [PATCH 1/3] Normalize onChange behavior in IE for placeholders

Checks for actual changes to the value, eliminating the case where empty
---
 .../ui/dom/components/ReactDOMInput.js        | 34 +++++++++++++++++++
 .../ui/dom/components/ReactDOMTextarea.js     | 30 ++++++++++++++++
 .../__tests__/ReactDOMInput-test.js           | 16 +++++++++
 .../__tests__/ReactDOMTextarea-test.js        | 16 +++++++++
 4 files changed, 96 insertions(+)

diff --git a/src/browser/ui/dom/components/ReactDOMInput.js b/src/browser/ui/dom/components/ReactDOMInput.js
index 49f783c1e1264..163193a559b7a 100644
--- a/src/browser/ui/dom/components/ReactDOMInput.js
+++ b/src/browser/ui/dom/components/ReactDOMInput.js
@@ -19,6 +19,7 @@ var ReactClass = require('ReactClass');
 var ReactElement = require('ReactElement');
 var ReactMount = require('ReactMount');
 var ReactUpdates = require('ReactUpdates');
+var isTextInputElement = require('isTextInputElement');
 
 var assign = require('Object.assign');
 var findDOMNode = require('findDOMNode');
@@ -28,6 +29,7 @@ var input = ReactElement.createFactory('input');
 
 var instancesByReactID = {};
 
+
 function forceUpdateIfMounted() {
   /*jshint validthis:true */
   if (this.isMounted()) {
@@ -35,6 +37,13 @@ function forceUpdateIfMounted() {
   }
 }
 
+function isIeInputEvent(event) {
+  return ('documentMode' in document)
+      && document.documentMode > 9
+      && event.nativeEvent.type === 'input'
+      && isTextInputElement(event.target);
+}
+
 /**
  * Implements an <input> native component that allows setting these optional
  * props: `checked`, `value`, `defaultChecked`, and `defaultValue`.
@@ -57,8 +66,15 @@ var ReactDOMInput = ReactClass.createClass({
 
   mixins: [AutoFocusMixin, LinkedValueUtils.Mixin, ReactBrowserComponentMixin],
 
+  componentWillMount: function() {
+    var defaultValue = this.props.defaultValue;
+
+    this._uncontrolledValue = defaultValue != null ? '' + defaultValue : '';
+  },
+
   getInitialState: function() {
     var defaultValue = this.props.defaultValue;
+
     return {
       initialChecked: this.props.defaultChecked || false,
       initialValue: defaultValue != null ? defaultValue : null
@@ -115,6 +131,24 @@ var ReactDOMInput = ReactClass.createClass({
   _handleChange: function(event) {
     var returnValue;
     var onChange = LinkedValueUtils.getOnChange(this.props);
+
+    // IE 10+ fire input events when setting/unsetting a placeholder
+    // we guard against it by checking if the next and
+    // last values are both empty and bailing out of the change
+    // https://github.com/facebook/react/issues/3484
+    if ( isIeInputEvent(event) ) {
+      var controlledValue = LinkedValueUtils.getValue(this.props);
+      var lastValue = controlledValue != null ?
+        '' + controlledValue :
+        this._uncontrolledValue;
+
+      this._uncontrolledValue = event.target.value;
+
+      if ( event.target.value === '' && lastValue === '') {
+        return returnValue;
+      }
+    }
+
     if (onChange) {
       returnValue = onChange.call(this, event);
     }
diff --git a/src/browser/ui/dom/components/ReactDOMTextarea.js b/src/browser/ui/dom/components/ReactDOMTextarea.js
index 0261005c40ca4..0db22c5c7f3ca 100644
--- a/src/browser/ui/dom/components/ReactDOMTextarea.js
+++ b/src/browser/ui/dom/components/ReactDOMTextarea.js
@@ -34,6 +34,12 @@ function forceUpdateIfMounted() {
   }
 }
 
+function isIeInputEvent(event) {
+  return ('documentMode' in document)
+      && document.documentMode > 9
+      && event.nativeEvent.type === 'input';
+}
+
 /**
  * Implements a <textarea> native component that allows setting `value`, and
  * `defaultValue`. This differs from the traditional DOM API because value is
@@ -55,6 +61,12 @@ var ReactDOMTextarea = ReactClass.createClass({
 
   mixins: [AutoFocusMixin, LinkedValueUtils.Mixin, ReactBrowserComponentMixin],
 
+  componentWillMount: function() {
+    var defaultValue = this.props.defaultValue;
+
+    this._uncontrolledValue = defaultValue != null ? '' + defaultValue : '';
+  },
+
   getInitialState: function() {
     var defaultValue = this.props.defaultValue;
     // TODO (yungsters): Remove support for children content in <textarea>.
@@ -125,6 +137,24 @@ var ReactDOMTextarea = ReactClass.createClass({
   _handleChange: function(event) {
     var returnValue;
     var onChange = LinkedValueUtils.getOnChange(this.props);
+
+    // IE 10+ fire input events when setting/unsetting a placeholder
+    // we guard against it by checking if the next and
+    // last values are both empty and bailing out of the change
+    // https://github.com/facebook/react/issues/3484
+    if ( isIeInputEvent(event) ) {
+      var controlledValue = LinkedValueUtils.getValue(this.props);
+      var lastValue = controlledValue != null ?
+        '' + controlledValue :
+        this._uncontrolledValue;
+
+      this._uncontrolledValue = event.target.value;
+
+      if ( event.target.value === '' && lastValue === '') {
+        return returnValue;
+      }
+    }
+
     if (onChange) {
       returnValue = onChange.call(this, event);
     }
diff --git a/src/browser/ui/dom/components/__tests__/ReactDOMInput-test.js b/src/browser/ui/dom/components/__tests__/ReactDOMInput-test.js
index f67d43d1b8e3e..7a85e88e15713 100644
--- a/src/browser/ui/dom/components/__tests__/ReactDOMInput-test.js
+++ b/src/browser/ui/dom/components/__tests__/ReactDOMInput-test.js
@@ -348,4 +348,20 @@ describe('ReactDOMInput', function() {
       <input type="checkbox" checkedLink={link} valueLink={emptyFunction} />;
     expect(React.render.bind(React, instance, node)).toThrow();
   });
+
+  it('should not fire change handlers when setting placeholders', function() {
+    var change = mocks.getMockFunction();
+    var instance = <input type="text" onChange={change} placeholder={'test'}/>;
+
+    instance = ReactTestUtils.renderIntoDocument(instance);
+
+    React.findDOMNode(instance).focus()
+
+    instance.replaceProps({ type: "text", onChange: change });
+
+    expect(change.mock.calls.length).toBe(0);
+    
+    ReactTestUtils.Simulate.change(React.findDOMNode(instance));
+    expect(change.mock.calls.length).toBe(1);
+  });
 });
diff --git a/src/browser/ui/dom/components/__tests__/ReactDOMTextarea-test.js b/src/browser/ui/dom/components/__tests__/ReactDOMTextarea-test.js
index 902edd5e1baff..75dd3e5d2733b 100644
--- a/src/browser/ui/dom/components/__tests__/ReactDOMTextarea-test.js
+++ b/src/browser/ui/dom/components/__tests__/ReactDOMTextarea-test.js
@@ -231,4 +231,20 @@ describe('ReactDOMTextarea', function() {
     expect(link.requestChange.mock.calls.length).toBe(1);
     expect(link.requestChange.mock.calls[0][0]).toEqual('test');
   });
+
+  it('should not fire change handlers when setting placeholders', function() {
+    var change = mocks.getMockFunction();
+    var instance = <textarea onChange={change} placeholder={'test'}/>;
+
+    instance = ReactTestUtils.renderIntoDocument(instance);
+
+    React.findDOMNode(instance).focus()
+
+    instance.replaceProps({ onChange: change });
+
+    expect(change.mock.calls.length).toBe(0);
+
+    ReactTestUtils.Simulate.change(React.findDOMNode(instance));
+    expect(change.mock.calls.length).toBe(1);
+  });
 });

From 81a8c3bc3dd8103d12d5eef0e51176f1c0cd5bad Mon Sep 17 00:00:00 2001
From: jquense <monastic.panic@gmail.com>
Date: Thu, 7 May 2015 16:04:22 -0400
Subject: [PATCH 2/3] cache IE support test value and fix style issues

---
 .../ui/dom/components/ReactDOMInput.js        | 19 +++++++++++++------
 .../ui/dom/components/ReactDOMTextarea.js     | 17 ++++++++++++-----
 2 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/src/browser/ui/dom/components/ReactDOMInput.js b/src/browser/ui/dom/components/ReactDOMInput.js
index 163193a559b7a..06f951f038f3e 100644
--- a/src/browser/ui/dom/components/ReactDOMInput.js
+++ b/src/browser/ui/dom/components/ReactDOMInput.js
@@ -19,6 +19,7 @@ var ReactClass = require('ReactClass');
 var ReactElement = require('ReactElement');
 var ReactMount = require('ReactMount');
 var ReactUpdates = require('ReactUpdates');
+var ExecutionEnvironment = require('ExecutionEnvironment');
 var isTextInputElement = require('isTextInputElement');
 
 var assign = require('Object.assign');
@@ -28,7 +29,11 @@ var invariant = require('invariant');
 var input = ReactElement.createFactory('input');
 
 var instancesByReactID = {};
+var hasNoisyInputEvent = false;
 
+if (ExecutionEnvironment.canUseDOM) {
+  hasNoisyInputEvent = 'documentMode' in document && document.documentMode > 9;
+}
 
 function forceUpdateIfMounted() {
   /*jshint validthis:true */
@@ -37,11 +42,13 @@ function forceUpdateIfMounted() {
   }
 }
 
-function isIeInputEvent(event) {
-  return ('documentMode' in document)
-      && document.documentMode > 9
-      && event.nativeEvent.type === 'input'
-      && isTextInputElement(event.target);
+
+function isIEInputEvent(event) {
+  return (
+    hasNoisyInputEvent &&
+    event.nativeEvent.type === 'input' &&
+    isTextInputElement(event.target)
+  );
 }
 
 /**
@@ -136,7 +143,7 @@ var ReactDOMInput = ReactClass.createClass({
     // we guard against it by checking if the next and
     // last values are both empty and bailing out of the change
     // https://github.com/facebook/react/issues/3484
-    if ( isIeInputEvent(event) ) {
+    if (isIEInputEvent(event)) {
       var controlledValue = LinkedValueUtils.getValue(this.props);
       var lastValue = controlledValue != null ?
         '' + controlledValue :
diff --git a/src/browser/ui/dom/components/ReactDOMTextarea.js b/src/browser/ui/dom/components/ReactDOMTextarea.js
index 0db22c5c7f3ca..36a53c787bf70 100644
--- a/src/browser/ui/dom/components/ReactDOMTextarea.js
+++ b/src/browser/ui/dom/components/ReactDOMTextarea.js
@@ -18,6 +18,7 @@ var ReactBrowserComponentMixin = require('ReactBrowserComponentMixin');
 var ReactClass = require('ReactClass');
 var ReactElement = require('ReactElement');
 var ReactUpdates = require('ReactUpdates');
+var ExecutionEnvironment = require('ExecutionEnvironment');
 
 var assign = require('Object.assign');
 var findDOMNode = require('findDOMNode');
@@ -26,6 +27,11 @@ var invariant = require('invariant');
 var warning = require('warning');
 
 var textarea = ReactElement.createFactory('textarea');
+var hasNoisyInputEvent = false;
+
+if (ExecutionEnvironment.canUseDOM) {
+  hasNoisyInputEvent = 'documentMode' in document && document.documentMode > 9;
+}
 
 function forceUpdateIfMounted() {
   /*jshint validthis:true */
@@ -34,10 +40,11 @@ function forceUpdateIfMounted() {
   }
 }
 
-function isIeInputEvent(event) {
-  return ('documentMode' in document)
-      && document.documentMode > 9
-      && event.nativeEvent.type === 'input';
+function isIEInputEvent(event) {
+  return (
+    hasNoisyInputEvent &&
+    event.nativeEvent.type === 'input'
+  );
 }
 
 /**
@@ -142,7 +149,7 @@ var ReactDOMTextarea = ReactClass.createClass({
     // we guard against it by checking if the next and
     // last values are both empty and bailing out of the change
     // https://github.com/facebook/react/issues/3484
-    if ( isIeInputEvent(event) ) {
+    if (isIEInputEvent(event)) {
       var controlledValue = LinkedValueUtils.getValue(this.props);
       var lastValue = controlledValue != null ?
         '' + controlledValue :

From 640d64b6eb7df57524e79833730f4f824fc4b960 Mon Sep 17 00:00:00 2001
From: jquense <monastic.panic@gmail.com>
Date: Thu, 21 May 2015 07:14:08 -0400
Subject: [PATCH 3/3] simplify value check, stop propagation

---
 src/browser/ui/dom/components/ReactDOMInput.js  | 17 ++++++++++-------
 .../ui/dom/components/ReactDOMTextarea.js       | 17 ++++++++++-------
 2 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/src/browser/ui/dom/components/ReactDOMInput.js b/src/browser/ui/dom/components/ReactDOMInput.js
index 06f951f038f3e..b1910d1186295 100644
--- a/src/browser/ui/dom/components/ReactDOMInput.js
+++ b/src/browser/ui/dom/components/ReactDOMInput.js
@@ -74,9 +74,14 @@ var ReactDOMInput = ReactClass.createClass({
   mixins: [AutoFocusMixin, LinkedValueUtils.Mixin, ReactBrowserComponentMixin],
 
   componentWillMount: function() {
+    var value = LinkedValueUtils.getValue(this.props);
     var defaultValue = this.props.defaultValue;
 
-    this._uncontrolledValue = defaultValue != null ? '' + defaultValue : '';
+    if (defaultValue == null) {
+      defaultValue = '';
+    }
+
+    this._lastValue = value != null ? value : defaultValue;
   },
 
   getInitialState: function() {
@@ -144,15 +149,13 @@ var ReactDOMInput = ReactClass.createClass({
     // last values are both empty and bailing out of the change
     // https://github.com/facebook/react/issues/3484
     if (isIEInputEvent(event)) {
-      var controlledValue = LinkedValueUtils.getValue(this.props);
-      var lastValue = controlledValue != null ?
-        '' + controlledValue :
-        this._uncontrolledValue;
+      var lastValue = this._lastValue;
 
-      this._uncontrolledValue = event.target.value;
+      this._lastValue = event.target.value;
 
       if ( event.target.value === '' && lastValue === '') {
-        return returnValue;
+        event.stopPropagation();
+        return undefined;
       }
     }
 
diff --git a/src/browser/ui/dom/components/ReactDOMTextarea.js b/src/browser/ui/dom/components/ReactDOMTextarea.js
index 36a53c787bf70..666a1e1716668 100644
--- a/src/browser/ui/dom/components/ReactDOMTextarea.js
+++ b/src/browser/ui/dom/components/ReactDOMTextarea.js
@@ -69,9 +69,14 @@ var ReactDOMTextarea = ReactClass.createClass({
   mixins: [AutoFocusMixin, LinkedValueUtils.Mixin, ReactBrowserComponentMixin],
 
   componentWillMount: function() {
+    var value = LinkedValueUtils.getValue(this.props);
     var defaultValue = this.props.defaultValue;
 
-    this._uncontrolledValue = defaultValue != null ? '' + defaultValue : '';
+    if (defaultValue == null) {
+      defaultValue = '';
+    }
+
+    this._lastValue = value != null ? value : defaultValue;
   },
 
   getInitialState: function() {
@@ -150,15 +155,13 @@ var ReactDOMTextarea = ReactClass.createClass({
     // last values are both empty and bailing out of the change
     // https://github.com/facebook/react/issues/3484
     if (isIEInputEvent(event)) {
-      var controlledValue = LinkedValueUtils.getValue(this.props);
-      var lastValue = controlledValue != null ?
-        '' + controlledValue :
-        this._uncontrolledValue;
+      var lastValue = this._lastValue;
 
-      this._uncontrolledValue = event.target.value;
+      this._lastValue = event.target.value;
 
       if ( event.target.value === '' && lastValue === '') {
-        return returnValue;
+        event.stopPropagation();
+        return undefined;
       }
     }