Merge pull request #30 from 1000hz/fix-modal-close-behavior

Prevent modal from closing when modal is partial target of click
cloudflare · Aug 21, 2019 · 824469d · 824469d
2 parents 0bee6ec + e45e44b
commit 824469d
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 5 deletions.
diff --git a/src/Modal.js b/src/Modal.js
@@ -39,6 +39,8 @@ export default class ReactModal2 extends React.Component {
     closeOnBackdropClick: true
   };
 
+  preventModalClose = false
+
   componentDidMount() {
     if (ExecutionEnvironment.canUseDOM) {
       setFocusOn(ReactModal2.getApplicationElement(), this.modal);
@@ -60,13 +62,15 @@ export default class ReactModal2 extends React.Component {
   }
 
   handleBackdropClick = () => {
-    if (this.props.closeOnBackdropClick) {
+    if (this.props.closeOnBackdropClick && !this.preventModalClose) {
       this.props.onClose();
     }
+
+    this.preventModalClose = false
   }
 
   handleModalClick = event => {
-    event.stopPropagation();
+    this.preventModalClose = true
   }
 
   render() {
@@ -78,7 +82,8 @@ export default class ReactModal2 extends React.Component {
         <div ref={i => this.modal = i}
           className={this.props.modalClassName}
           style={this.props.modalStyles}
-          onClick={this.handleModalClick}
+          onMouseDown={this.handleModalClick}
+          onMouseUp={this.handleModalClick}
           tabIndex="-1">
           {this.props.children}
         </div>

diff --git a/test/index.js b/test/index.js
@@ -65,18 +65,34 @@ describe('ReactModal2', function() {
     expect(called).to.be.false;
   });
 
-  it('should not call `onClose` when the modal is clicked', function() {
+  it('should not call `onClose` when the modal is the start target of a click', function() {
     var called = false;
     var onClose = function() { called = true; };
 
     var dom = <ReactModal2 onClose={onClose}/>;
     var instance = ReactDOM.render(dom, this.root);
 
-    TestUtils.Simulate.click(instance.modal);
+    TestUtils.Simulate.mouseDown(instance.modal);
+    TestUtils.Simulate.mouseUp(instance.backdrop);
+    TestUtils.Simulate.click(instance.backdrop);
 
     expect(called).to.be.false;
   });
 
+  it('should not call `onClose` when the modal is the end target of a click', function() {
+    var called = false;
+    var onClose = function() { called = true; };
+
+    var dom = <ReactModal2 onClose={onClose}/>;
+    var instance = ReactDOM.render(dom, this.root);
+
+    TestUtils.Simulate.mouseDown(instance.backdrop);
+    TestUtils.Simulate.mouseUp(instance.modal);
+    TestUtils.Simulate.click(instance.backdrop);
+
+    expect(called).to.be.false;
+  });
+
   it('should scope the focus on the modal when mounted', function() {
     var input = document.createElement('input');
     document.body.appendChild(input);