From 4fa5628d6dcc472f7aafa1af28f04adfe27e95b5 Mon Sep 17 00:00:00 2001
From: "Mr. Silver" <thanhch@bravebits.vn>
Date: Thu, 5 Oct 2017 17:34:38 +0700
Subject: [PATCH] [fixed] Drag stop (mouseup) on Overlay closes Modal

---
 src/components/ModalPortal.js | 22 +++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/src/components/ModalPortal.js b/src/components/ModalPortal.js
index c2949ae8..3693ffa6 100644
--- a/src/components/ModalPortal.js
+++ b/src/components/ModalPortal.js
@@ -65,6 +65,7 @@ export default class ModalPortal extends Component {
     };
 
     this.shouldClose = null;
+    this.moveFromContentToOverlay = null;
   }
 
   componentDidMount() {
@@ -216,6 +217,21 @@ export default class ModalPortal extends Component {
       }
     }
     this.shouldClose = null;
+    this.moveFromContentToOverlay = null;
+  }
+
+  handleOverlayOnMouseUp = () => {
+    if (this.moveFromContentToOverlay === null) {
+      this.shouldClose = false;
+    }
+  }
+
+  handleContentOnMouseUp = () => {
+    this.shouldClose = false;
+  }
+
+  handleOverlayOnMouseDown = () => {
+    this.moveFromContentToOverlay = false;
   }
 
   handleContentOnClick = () => {
@@ -224,6 +240,7 @@ export default class ModalPortal extends Component {
 
   handleContentOnMouseDown = () => {
     this.shouldClose = false;
+    this.moveFromContentToOverlay = false;
   }
 
   requestClose = event =>
@@ -271,7 +288,9 @@ export default class ModalPortal extends Component {
         ref={this.setOverlayRef}
         className={this.buildClassName('overlay', overlayClassName)}
         style={{ ...overlayStyles, ...this.props.style.overlay }}
-        onClick={this.handleOverlayOnClick}>
+        onClick={this.handleOverlayOnClick}
+        onMouseDown={this.handleOverlayOnMouseDown}
+        onMouseUp={this.handleOverlayOnMouseUp}>
         <div
           ref={this.setContentRef}
           style={{ ...contentStyles, ...this.props.style.content }}
@@ -279,6 +298,7 @@ export default class ModalPortal extends Component {
           tabIndex="-1"
           onKeyDown={this.handleKeyDown}
           onMouseDown={this.handleContentOnMouseDown}
+          onMouseUp={this.handleContentOnMouseUp}
           onClick={this.handleContentOnClick}
           role={this.props.role}
           aria-label={this.props.contentLabel}