diff --git a/lib/components/ModalPortal.js b/lib/components/ModalPortal.js index 88398d81..f25b27c0 100644 --- 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 index 53670799..72162ac2 100644 --- 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) + }); }); });