diff --git a/lib/components/ModalPortal.js b/lib/components/ModalPortal.js
index ad049ae7..fc2a3ad3 100644
--- a/lib/components/ModalPortal.js
+++ b/lib/components/ModalPortal.js
@@ -153,29 +153,14 @@ export default class ModalPortal extends Component {
     }
   }
 
-  handleOverlayMouseDown = () => {
-    if (this.shouldClose === null) {
-      this.shouldClose = true;
-    }
-  }
-
-  handleOverlayMouseUp = (event) => {
-    if (this.shouldClose && this.props.shouldCloseOnOverlayClick) {
-      if (this.ownerHandlesClose()) {
-        this.requestClose(event);
-      } else {
-        this.focusContent();
-      }
+  handleOverlayClick(event) {
+    if (this.props.shouldCloseOnOverlayClick && this.ownerHandlesClose()) {
+      this.requestClose(event);
     }
-    this.shouldClose = null;
-  }
-
-  handleContentMouseDown = () => {
-    this.shouldClose = false;
   }
 
-  handleContentMouseUp = () => {
-    this.shouldClose = false;
+  handleContentClick(event) {
+    event.stopPropagation();
   }
 
   requestClose (event) {
@@ -217,8 +202,7 @@ export default class ModalPortal extends Component {
         ref={(c) => { this.overlay = c; }}
         className={this.buildClassName('overlay', this.props.overlayClassName)}
         style={Assign({}, overlayStyles, this.props.style.overlay || {})}
-        onMouseDown={this.handleOverlayMouseDown}
-        onMouseUp={this.handleOverlayMouseUp}
+        onClick={this.handleOverlayClick}
       >
         <div
           ref={(c) => { this.content = c; }}
@@ -226,8 +210,7 @@ export default class ModalPortal extends Component {
           className={this.buildClassName('content', this.props.className)}
           tabIndex={-1}
           onKeyDown={this.handleKeyDown}
-          onMouseDown={this.handleContentMouseDown}
-          onMouseUp={this.handleContentMouseUp}
+          onClick={this.handleContentClick}
           role={this.props.role}
           aria-label={this.props.contentLabel}
         >