Avoid stopPropagation

* avoid using stopPropagation * add test for avoiding stopPropagation
reactjs · Apr 6, 2016 · cf70338 · cf70338
1 parent f9871c6
commit cf70338
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 6 deletions.
diff --git a/lib/components/ModalPortal.js b/lib/components/ModalPortal.js
@@ -44,10 +44,6 @@ var defaultStyles = {
   }
 };
 
-function stopPropagation(event) {
-  event.stopPropagation();
-}
-
 var ModalPortal = module.exports = React.createClass({
 
   displayName: 'ModalPortal',
@@ -148,7 +144,14 @@ var ModalPortal = module.exports = React.createClass({
     }
   },
 
-  handleOverlayClick: function() {
+  handleOverlayClick: function(event) {
+    var node = event.target
+
+    while (node) {
+      if (node === this.refs.content) return
+      node = node.parentNode
+    }
+
     if (this.props.shouldCloseOnOverlayClick) {
       if (this.ownerHandlesClose())
         this.requestClose();
@@ -195,7 +198,6 @@ var ModalPortal = module.exports = React.createClass({
           style: Assign({}, contentStyles, this.props.style.content || {}),
           className: this.buildClassName('content', this.props.className),
           tabIndex: "-1",
-          onClick: stopPropagation,
           onKeyDown: this.handleKeyDown
         },
           this.props.children

diff --git a/specs/Modal.spec.js b/specs/Modal.spec.js
@@ -237,6 +237,18 @@ describe('Modal', function () {
         Simulate.click(overlay[0]); // click the overlay
         ok(requestCloseCallback.called)
       });
+
+      it('should not stop event propagation', function() {
+        var hasPropagated = false
+        var modal = renderModal({
+          isOpen: true,
+          shouldCloseOnOverlayClick: true
+        });
+        var overlay = TestUtils.scryRenderedDOMComponentsWithClass(modal.portal, 'ReactModal__Overlay');
+        window.addEventListener('click', function () { hasPropagated = true })
+        overlay[0].dispatchEvent(new MouseEvent('click', { bubbles: true }))
+        ok(hasPropagated)
+      });
     });
   });