better event handling for contextmenu

Author: meikoudras

modules/contextmenu-layer.js

@@ -33,14 +33,18 @@ exports["default"] = function (identifier, configure) {
         (0, _invariant2["default"])(typeof configure === "function", "Expected configure to be a function. See %s", displayName);
 
         return _react2["default"].createClass({
-            displayName: displayName + "ContextMenuLayer",
-            componentDidMount: function componentDidMount() {
-                _react2["default"].findDOMNode(this).addEventListener("contextmenu", this.handleContextClick);
-            },
-            componentWillUnmount: function componentWillUnmount() {
-                _react2["default"].findDOMNode(this).removeEventListener("contextmenu", this.handleContextClick);
-            },
-            handleContextClick: function handleContextClick(event) {
+          displayName: displayName + "ContextMenuLayer",
+          componentDidMount: function componentDidMount() {
+              document.addEventListener("contextmenu", this.handleContextClick);
+          },
+          componentWillUnmount: function componentWillUnmount() {
+              document.addEventListener("contextmenu", this.handleContextClick);
+          },
+          handleContextClick: function handleContextClick(event) {
+              var target = event.target;
+              var domNode = _react2["default"].findDOMNode(this);
+
+              if(target == domNode || domNode.contains(target)) {
                 var currentItem = configure(this.props);
 
                 (0, _invariant2["default"])((0, _lodashIsobject2["default"])(currentItem), "Expected configure to return an object. See %s", displayName);
@@ -53,12 +57,14 @@ exports["default"] = function (identifier, configure) {
                     currentItem: currentItem,
                     isVisible: typeof identifier === "function" ? identifier(this.props) : identifier
                 });
-            },
-            render: function render() {
-                return _react2["default"].createElement(Component, _extends({}, this.props, { identifier: identifier }));
-            }
-        });
+              }
+
+          },
+          render: function render() {
+              return _react2["default"].createElement(Component, _extends({}, this.props, { identifier: identifier }));
+          }
+      });
     };
 };
 
-module.exports = exports["default"];
+module.exports = exports["default"];

src/contextmenu-layer.js

@@ -28,30 +28,34 @@ export default function (identifier, configure) {
         return React.createClass({
             displayName: `${displayName}ContextMenuLayer`,
             componentDidMount() {
-                React.findDOMNode(this)
+                document
                     .addEventListener("contextmenu", this.handleContextClick);
             },
             componentWillUnmount() {
-                React.findDOMNode(this)
+                document
                     .removeEventListener("contextmenu", this.handleContextClick);
             },
             handleContextClick(event) {
-                let currentItem = configure(this.props);
+                let target = event.target;
+                let domNode = React.findDOMNode(this);
+                if(target == domNode || domNode.contains(target)) {
+                    let currentItem = configure(this.props);
+    
+                    invariant(
+                        _isObject(currentItem),
+                        "Expected configure to return an object. See %s",
+                        displayName
+                    );
 
-                invariant(
-                    _isObject(currentItem),
-                    "Expected configure to return an object. See %s",
-                    displayName
-                );
-
-                event.preventDefault();
-                const actions = flux.getActions("menu");
-                actions.setParams({
-                    x: event.clientX,
-                    y: event.clientY,
-                    currentItem,
-                    isVisible: typeof identifier === "function" ? identifier(this.props) : identifier
-                });
+                    event.preventDefault();
+                    const actions = flux.getActions("menu");
+                    actions.setParams({
+                        x: event.clientX,
+                        y: event.clientY,
+                        currentItem,
+                        isVisible: typeof identifier === "function" ? identifier(this.props) : identifier
+                    });
+                }
             },
             render() {
                 return (