From 7d34c09e171232a152f76cde0530f1701e57d694 Mon Sep 17 00:00:00 2001
From: Andrew Zich <azich@fb.com>
Date: Thu, 29 Aug 2013 17:31:44 -0700
Subject: [PATCH] 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             |  2 +
 src/dom/components/ReactDOMButton.js          | 64 ++++++++++++++
 .../__tests__/ReactDOMButton-test.js          | 88 +++++++++++++++++++
 3 files changed, 154 insertions(+)
 create mode 100644 src/dom/components/ReactDOMButton.js
 create mode 100644 src/dom/components/__tests__/ReactDOMButton-test.js

diff --git a/src/core/ReactDefaultInjection.js b/src/core/ReactDefaultInjection.js
index f0febc2f66..b1a0d90ac1 100644
--- a/src/core/ReactDefaultInjection.js
+++ b/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,
diff --git a/src/dom/components/ReactDOMButton.js b/src/dom/components/ReactDOMButton.js
new file mode 100644
index 0000000000..83dedd5459
--- /dev/null
+++ b/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;
diff --git a/src/dom/components/__tests__/ReactDOMButton-test.js b/src/dom/components/__tests__/ReactDOMButton-test.js
new file mode 100644
index 0000000000..21a000018c
--- /dev/null
+++ b/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);
+  });
+});