Don't trigger mouse events on native button elements that are disabled

This adds a `ReactDOMButton` module that shims the native `<button>` React component so it doesn't receive mouseup, mousemove, mousedown, click, or double-click events when its disabled property is truthy.

src/core/ReactDefaultInjection.js

@@ -19,6 +19,7 @@
 "use strict";
 
 var ReactDOM = require('ReactDOM');
+var ReactDOMButton = require('ReactDOMButton');
 var ReactDOMForm = require('ReactDOMForm');
 var ReactDOMInput = require('ReactDOMInput');
 var ReactDOMOption = require('ReactDOMOption');
@@ -59,6 +60,7 @@ function inject() {
   });
 
   ReactDOM.injection.injectComponentClasses({
+    button: ReactDOMButton,
     form: ReactDOMForm,
     input: ReactDOMInput,
     option: ReactDOMOption,

src/dom/components/ReactDOMButton.js

@@ -0,0 +1,64 @@
+/**
+ * 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 ReactDOMButton
+ */
+
+"use strict";
+
+var ReactCompositeComponent = require('ReactCompositeComponent');
+var ReactDOM = require('ReactDOM');
+
+var keyMirror = require('keyMirror');
+
+// Store a reference to the <button> `ReactNativeComponent`.
+var button = ReactDOM.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.
+ */
+var ReactDOMButton = ReactCompositeComponent.createClass({
+
+  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];
+      }
+    }
+
+    return button(props, this.props.children);
+  }
+
+});
+
+module.exports = ReactDOMButton;

src/dom/components/__tests__/ReactDOMButton-test.js

@@ -0,0 +1,88 @@
+/**
+ * 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";
+
+/*jshint evil:true */
+
+var mocks = require('mocks');
+
+describe('ReactDOMButton', function() {
+  var React;
+  var ReactTestUtils;
+
+  var onClick = mocks.getMockFunction();
+
+  function expectClickThru(button) {
+    onClick.mockClear();
+    ReactTestUtils.Simulate.click(button.getDOMNode());
+    expect(onClick.mock.calls.length).toBe(1);
+  }
+
+  function expectNoClickThru(button) {
+    onClick.mockClear();
+    ReactTestUtils.Simulate.click(button.getDOMNode());
+    expect(onClick.mock.calls.length).toBe(0);
+  }
+
+  function mounted(button) {
+    ReactTestUtils.renderIntoDocument(button);
+    return button;
+  }
+
+  beforeEach(function() {
+    React = require('React');
+    ReactTestUtils = require('ReactTestUtils');
+  });
+
+  it('should forward clicks when it starts out not disabled', function() {
+    expectClickThru(mounted(<button onClick={onClick} />));
+  });
+
+  it('should not forward clicks when it starts out disabled', function() {
+    expectNoClickThru(
+      mounted(<button disabled={true} onClick={onClick} />)
+    );
+  });
+
+  it('should forward clicks when it becomes not disabled', function() {
+    var btn = mounted(<button disabled={true} onClick={onClick} />);
+    btn.setProps({disabled: false});
+    expectClickThru(btn);
+  });
+
+  it('should not forward clicks when it becomes disabled', function() {
+    var btn = mounted(<button onClick={onClick} />);
+    btn.setProps({disabled: true});
+    expectNoClickThru(btn);
+  });
+
+  it('should work correctly if the listener is changed', function() {
+    var btn = mounted(
+      <button disabled={true} onClick={function() {}} />
+    );
+
+    btn.setProps({
+      disabled: false,
+      onClick: onClick
+    });
+
+    expectClickThru(btn);
+  });
+});