From e0321640c609f975ab5d404503e1ba71d42464a4 Mon Sep 17 00:00:00 2001 From: Nate Hunzaker Date: Thu, 1 Sep 2016 22:39:55 -0400 Subject: [PATCH 1/8] Cull disabled mouse events at plugin level. Remove component level filters --- .../client/eventPlugins/SimpleEventPlugin.js | 5 ++ .../dom/client/wrappers/DisabledInputUtils.js | 50 ------------------- .../dom/client/wrappers/ReactDOMButton.js | 24 --------- .../dom/client/wrappers/ReactDOMInput.js | 3 +- .../dom/client/wrappers/ReactDOMSelect.js | 3 +- .../dom/client/wrappers/ReactDOMTextarea.js | 3 +- .../__tests__/DisabledInputUtil-test.js | 4 +- src/renderers/dom/shared/ReactDOMComponent.js | 8 --- 8 files changed, 10 insertions(+), 90 deletions(-) delete mode 100644 src/renderers/dom/client/wrappers/DisabledInputUtils.js delete mode 100644 src/renderers/dom/client/wrappers/ReactDOMButton.js diff --git a/src/renderers/dom/client/eventPlugins/SimpleEventPlugin.js b/src/renderers/dom/client/eventPlugins/SimpleEventPlugin.js index e17d72889dd..3bedaa67f64 100644 --- a/src/renderers/dom/client/eventPlugins/SimpleEventPlugin.js +++ b/src/renderers/dom/client/eventPlugins/SimpleEventPlugin.js @@ -224,6 +224,11 @@ var SimpleEventPlugin: PluginModule = { case 'topMouseOut': case 'topMouseOver': case 'topMouseUp': + // Disabled elements should not respond to mouse events + if (targetInst._currentElement && + targetInst._currentElement.props.disabled) { + return null + } EventConstructor = SyntheticMouseEvent; break; case 'topDrag': diff --git a/src/renderers/dom/client/wrappers/DisabledInputUtils.js b/src/renderers/dom/client/wrappers/DisabledInputUtils.js deleted file mode 100644 index 1393a14b4e8..00000000000 --- a/src/renderers/dom/client/wrappers/DisabledInputUtils.js +++ /dev/null @@ -1,50 +0,0 @@ -/** - * Copyright 2013-present, 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 DisabledInputUtils - */ - -'use strict'; - -var disableableMouseListenerNames = { - onClick: true, - onDoubleClick: true, - onMouseDown: true, - onMouseMove: true, - onMouseUp: true, - - onClickCapture: true, - onDoubleClickCapture: true, - onMouseDownCapture: true, - onMouseMoveCapture: true, - onMouseUpCapture: true, -}; - -/** - * Implements a host component that does not receive mouse events - * when `disabled` is set. - */ -var DisabledInputUtils = { - getHostProps: function(inst, props) { - if (!props.disabled) { - return props; - } - - // Copy the props, except the mouse listeners - var hostProps = {}; - for (var key in props) { - if (!disableableMouseListenerNames[key] && props.hasOwnProperty(key)) { - hostProps[key] = props[key]; - } - } - - return hostProps; - }, -}; - -module.exports = DisabledInputUtils; diff --git a/src/renderers/dom/client/wrappers/ReactDOMButton.js b/src/renderers/dom/client/wrappers/ReactDOMButton.js deleted file mode 100644 index 09879c9397a..00000000000 --- a/src/renderers/dom/client/wrappers/ReactDOMButton.js +++ /dev/null @@ -1,24 +0,0 @@ -/** - * Copyright 2013-present, 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 ReactDOMButton - */ - -'use strict'; - -var DisabledInputUtils = require('DisabledInputUtils'); - -/** - * Implements a , container); + + var node = container.firstChild; + + node.dispatchEvent(new MouseEvent('click')); + + expect(onClick.mock.calls.length).toBe(0); + }); + + it ('adds a local click listener to non-interactive elements', function() { + var container = document.createElement('div'); + + ReactDOM.render(
, container); + + var node = container.firstChild; + + node.dispatchEvent(new MouseEvent('click')); + + expect(onClick.mock.calls.length).toBe(0); + }); + }); }); From c3e3881e17ebe7d8e25bde6fb4360791b5f2df60 Mon Sep 17 00:00:00 2001 From: Nate Hunzaker Date: Fri, 2 Sep 2016 20:48:37 -0400 Subject: [PATCH 6/8] Reduce number of mouse events disabable. Formatting in isIteractive() --- .../dom/client/eventPlugins/SimpleEventPlugin.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/src/renderers/dom/client/eventPlugins/SimpleEventPlugin.js b/src/renderers/dom/client/eventPlugins/SimpleEventPlugin.js index cf7171ff6cf..c237008fe63 100644 --- a/src/renderers/dom/client/eventPlugins/SimpleEventPlugin.js +++ b/src/renderers/dom/client/eventPlugins/SimpleEventPlugin.js @@ -147,8 +147,8 @@ function getDictionaryKey(inst: ReactInstance): string { } function isInteractive(tag) { - return tag === 'button' || tag === 'input' - || tag === 'textarea' || tag === 'select'; + return tag === 'button' || tag === 'input' || + tag === 'textarea' || tag === 'select'; } function shouldPreventMouseEvent(inst) { @@ -234,17 +234,18 @@ var SimpleEventPlugin: PluginModule = { return null; } /* falls through */ - case 'topContextMenu': case 'topDoubleClick': case 'topMouseDown': case 'topMouseMove': - case 'topMouseOut': - case 'topMouseOver': case 'topMouseUp': // Disabled elements should not respond to mouse events if (shouldPreventMouseEvent(targetInst)) { return null; } + /* falls through */ + case 'topMouseOut': + case 'topMouseOver': + case 'topContextMenu': EventConstructor = SyntheticMouseEvent; break; case 'topDrag': From a408ae26dc86301b6ffec05837bedb03b645080b Mon Sep 17 00:00:00 2001 From: Nate Hunzaker Date: Fri, 2 Sep 2016 20:50:47 -0400 Subject: [PATCH 7/8] Switch isInteractive tag order for alignment --- src/renderers/dom/client/eventPlugins/SimpleEventPlugin.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/renderers/dom/client/eventPlugins/SimpleEventPlugin.js b/src/renderers/dom/client/eventPlugins/SimpleEventPlugin.js index c237008fe63..b77a61e5974 100644 --- a/src/renderers/dom/client/eventPlugins/SimpleEventPlugin.js +++ b/src/renderers/dom/client/eventPlugins/SimpleEventPlugin.js @@ -148,7 +148,7 @@ function getDictionaryKey(inst: ReactInstance): string { function isInteractive(tag) { return tag === 'button' || tag === 'input' || - tag === 'textarea' || tag === 'select'; + tag === 'select' || tag === 'textarea'; } function shouldPreventMouseEvent(inst) { From fcafa615d7804c4e544b1e08b35cef2c8105d86a Mon Sep 17 00:00:00 2001 From: Nate Hunzaker Date: Thu, 8 Sep 2016 14:33:40 -0400 Subject: [PATCH 8/8] Update formatting of isInteractive method --- src/renderers/dom/client/eventPlugins/SimpleEventPlugin.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/renderers/dom/client/eventPlugins/SimpleEventPlugin.js b/src/renderers/dom/client/eventPlugins/SimpleEventPlugin.js index b77a61e5974..7f1e41b60d1 100644 --- a/src/renderers/dom/client/eventPlugins/SimpleEventPlugin.js +++ b/src/renderers/dom/client/eventPlugins/SimpleEventPlugin.js @@ -147,8 +147,10 @@ function getDictionaryKey(inst: ReactInstance): string { } function isInteractive(tag) { - return tag === 'button' || tag === 'input' || - tag === 'select' || tag === 'textarea'; + return ( + tag === 'button' || tag === 'input' || + tag === 'select' || tag === 'textarea' + ); } function shouldPreventMouseEvent(inst) {