Fix #1790. Disabled input still clickable in IE11.

Takes some code from ReactDOMButton in order to solve the same problem
within ReactDOMInput, ReactDOMSelect, and ReactDOMTextarea.

Author: nhunzaker

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

@@ -16,23 +16,10 @@ var ReactBrowserComponentMixin = require('ReactBrowserComponentMixin');
 var ReactClass = require('ReactClass');
 var ReactElement = require('ReactElement');
 
-var keyMirror = require('keyMirror');
+var filterDisabledEvents = require('filterDisabledEvents');
 
 var button = ReactElement.createFactory('button');
 
-var mouseListenerNames = keyMirror({
-  onClick: true,
-  onDoubleClick: true,
-  onMouseDown: true,
-  onMouseMove: true,
-  onMouseUp: true,
-  onClickCapture: true,
-  onDoubleClickCapture: true,
-  onMouseDownCapture: true,
-  onMouseMoveCapture: true,
-  onMouseUpCapture: true
-});
-
 /**
  * Implements a <button> native component that does not receive mouse events
  * when `disabled` is set.
@@ -44,15 +31,7 @@ var ReactDOMButton = ReactClass.createClass({
   mixins: [AutoFocusMixin, ReactBrowserComponentMixin],
 
   render: function() {
-    var props = {};
-
-    // Copy the props; except the mouse listeners if we're disabled
-    for (var key in this.props) {
-      if (this.props.hasOwnProperty(key) &&
-          (!this.props.disabled || !mouseListenerNames[key])) {
-        props[key] = this.props[key];
-      }
-    }
+    var props = filterDisabledEvents(this.props);
 
     return button(props, this.props.children);
   }

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

@@ -20,8 +20,8 @@ var ReactElement = require('ReactElement');
 var ReactMount = require('ReactMount');
 var ReactUpdates = require('ReactUpdates');
 
-var assign = require('Object.assign');
 var findDOMNode = require('findDOMNode');
+var filterDisabledEvents = require('filterDisabledEvents');
 var invariant = require('invariant');
 
 var input = ReactElement.createFactory('input');
@@ -66,8 +66,7 @@ var ReactDOMInput = ReactClass.createClass({
   },
 
   render: function() {
-    // Clone `this.props` so we don't mutate the input.
-    var props = assign({}, this.props);
+    var props = filterDisabledEvents(this.props);
 
     props.defaultChecked = null;
     props.defaultValue = null;

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

@@ -18,8 +18,8 @@ var ReactClass = require('ReactClass');
 var ReactElement = require('ReactElement');
 var ReactUpdates = require('ReactUpdates');
 
-var assign = require('Object.assign');
 var findDOMNode = require('findDOMNode');
+var filterDisabledEvents = require('filterDisabledEvents');
 
 var select = ReactElement.createFactory('select');
 
@@ -122,8 +122,7 @@ var ReactDOMSelect = ReactClass.createClass({
   },
 
   render: function() {
-    // Clone `this.props` so we don't mutate the input.
-    var props = assign({}, this.props);
+    var props = filterDisabledEvents(this.props);
 
     props.onChange = this._handleChange;
     props.value = null;

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

@@ -19,9 +19,9 @@ var ReactClass = require('ReactClass');
 var ReactElement = require('ReactElement');
 var ReactUpdates = require('ReactUpdates');
 
-var assign = require('Object.assign');
 var findDOMNode = require('findDOMNode');
 var invariant = require('invariant');
+var filterDisabledEvents = require('filterDisabledEvents');
 
 var warning = require('warning');
 
@@ -95,8 +95,7 @@ var ReactDOMTextarea = ReactClass.createClass({
   },
 
   render: function() {
-    // Clone `this.props` so we don't mutate the input.
-    var props = assign({}, this.props);
+    var props = filterDisabledEvents(this.props);
 
     invariant(
       props.dangerouslySetInnerHTML == null,

src/browser/ui/dom/components/__tests__/ReactDOMInput-test.js

@@ -21,6 +21,25 @@ describe('ReactDOMInput', function() {
   var ReactLink;
   var ReactTestUtils;
 
+  var onClick = mocks.getMockFunction();
+
+  function expectClickThru(input) {
+    onClick.mockClear();
+    ReactTestUtils.Simulate.click(input.getDOMNode());
+    expect(onClick.mock.calls.length).toBe(1);
+  }
+
+  function expectNoClickThru(input) {
+    onClick.mockClear();
+    ReactTestUtils.Simulate.click(input.getDOMNode());
+    expect(onClick.mock.calls.length).toBe(0);
+  }
+
+  function mounted(input) {
+    input = ReactTestUtils.renderIntoDocument(input);
+    return input;
+  }
+
   beforeEach(function() {
     require('mock-modules').dumpCache();
     React = require('React');
@@ -29,6 +48,28 @@ describe('ReactDOMInput', function() {
     spyOn(console, 'warn');
   });
 
+  it('should forward clicks when it starts out not disabled', function() {
+    expectClickThru(mounted(<input onClick={onClick} />));
+  });
+
+  it('should not forward clicks when it starts out disabled', function() {
+    expectNoClickThru(
+      mounted(<input disabled={true} onClick={onClick} />)
+    );
+  });
+
+  it('should forward clicks when it becomes not disabled', function() {
+    var input = mounted(<input disabled={true} onClick={onClick} />);
+    input.setProps({disabled: false});
+    expectClickThru(input);
+  });
+
+  it('should not forward clicks when it becomes disabled', function() {
+    var input = mounted(<input onClick={onClick} />);
+    input.setProps({disabled: true});
+    expectNoClickThru(input);
+  });
+
   it('should display `defaultValue` of number 0', function() {
     var stub = <input type="text" defaultValue={0} />;
     stub = ReactTestUtils.renderIntoDocument(stub);

src/browser/ui/dom/components/__tests__/ReactDOMSelect-test.js

@@ -20,12 +20,53 @@ describe('ReactDOMSelect', function() {
   var ReactLink;
   var ReactTestUtils;
 
+  var onClick = mocks.getMockFunction();
+
+  function expectClickThru(select) {
+    onClick.mockClear();
+    ReactTestUtils.Simulate.click(select.getDOMNode());
+    expect(onClick.mock.calls.length).toBe(1);
+  }
+
+  function expectNoClickThru(select) {
+    onClick.mockClear();
+    ReactTestUtils.Simulate.click(select.getDOMNode());
+    expect(onClick.mock.calls.length).toBe(0);
+  }
+
+  function mounted(select) {
+    select = ReactTestUtils.renderIntoDocument(select);
+    return select;
+  }
+
   beforeEach(function() {
     React = require('React');
     ReactLink = require('ReactLink');
     ReactTestUtils = require('ReactTestUtils');
   });
 
+  it('should forward clicks when it starts out not disabled', function() {
+    expectClickThru(mounted(<select onClick={onClick} />));
+  });
+
+  it('should not forward clicks when it starts out disabled', function() {
+    expectNoClickThru(
+      mounted(<select disabled={true} onClick={onClick} />)
+    );
+  });
+
+  it('should forward clicks when it becomes not disabled', function() {
+    var select = mounted(<select disabled={true} onClick={onClick} />);
+    select.setProps({disabled: false});
+    expectClickThru(select);
+  });
+
+  it('should not forward clicks when it becomes disabled', function() {
+    var select = mounted(<select onClick={onClick} />);
+    select.setProps({disabled: true});
+    expectNoClickThru(select);
+  });
+
   it('should allow setting `defaultValue`', function() {
     var stub =
       <select defaultValue="giraffe">

src/browser/ui/dom/components/__tests__/ReactDOMTextarea-test.js

@@ -20,6 +20,24 @@ describe('ReactDOMTextarea', function() {
   var ReactTestUtils;
 
   var renderTextarea;
+  var onClick = mocks.getMockFunction();
+
+  function expectClickThru(textarea) {
+    onClick.mockClear();
+    ReactTestUtils.Simulate.click(textarea.getDOMNode());
+    expect(onClick.mock.calls.length).toBe(1);
+  }
+
+  function expectNoClickThru(textarea) {
+    onClick.mockClear();
+    ReactTestUtils.Simulate.click(textarea.getDOMNode());
+    expect(onClick.mock.calls.length).toBe(0);
+  }
+
+  function mounted(textarea) {
+    textarea = ReactTestUtils.renderIntoDocument(textarea);
+    return textarea;
+  }
 
   beforeEach(function() {
     React = require('React');
@@ -36,6 +54,28 @@ describe('ReactDOMTextarea', function() {
     };
   });
 
+  it('should forward clicks when it starts out not disabled', function() {
+    expectClickThru(mounted(<textarea onClick={onClick} />));
+  });
+
+  it('should not forward clicks when it starts out disabled', function() {
+    expectNoClickThru(
+      mounted(<textarea disabled={true} onClick={onClick} />)
+    );
+  });
+
+  it('should forward clicks when it becomes not disabled', function() {
+    var textarea = mounted(<textarea disabled={true} onClick={onClick} />);
+    textarea.setProps({disabled: false});
+    expectClickThru(textarea);
+  });
+
+  it('should not forward clicks when it becomes disabled', function() {
+    var textarea = mounted(<textarea onClick={onClick} />);
+    textarea.setProps({disabled: true});
+    expectNoClickThru(textarea);
+  });
+
   it('should allow setting `defaultValue`', function() {
     var stub = <textarea defaultValue="giraffe" />;
     stub = renderTextarea(stub);

src/browser/ui/dom/filterDisabledEvents.js

@@ -0,0 +1,47 @@
+/**
+ * Copyright 2013-2015, Facebook, Inc.
+ * All rights reserved.
+ *
+ * This source code is licensed under the BSD-style license found in the
+ * LICENSE file in the root directory of this source tree. An additional grant
+ * of patent rights can be found in the PATENTS file in the same directory.
+ *
+ * @providesModule filterDisabledEvents
+ */
+
+'use strict';
+
+var assign = require('Object.assign');
+var keyMirror = require('keyMirror');
+
+var blacklist = keyMirror({
+  onClick: true,
+  onDoubleClick: true,
+  onMouseDown: true,
+  onMouseMove: true,
+  onMouseUp: true,
+  onClickCapture: true,
+  onDoubleClickCapture: true,
+  onMouseDownCapture: true,
+  onMouseMoveCapture: true,
+  onMouseUpCapture: true
+});
+
+// Copy the props; except the mouse/touch listeners if we're disabled
+var filterDisabledEvents = function(props) {
+  if (!props.disabled) {
+    return assign({}, props);
+  }
+
+  var accepted = {};
+
+  for (var key in props) {
+    if (props.hasOwnProperty(key) && !blacklist[key]) {
+      accepted[key] = props[key];
+    }
+  }
+
+  return accepted;
+};
+
+module.exports = filterDisabledEvents;