From 93e111988f2dc0f748280a1efe0cceec27d529e5 Mon Sep 17 00:00:00 2001
From: oisu <oisuoisu+github@gmail.com>
Date: Tue, 24 Jan 2017 09:32:58 +0900
Subject: [PATCH] [fixed] Enable click to close in iOS (#301) (#304)

---
 lib/components/ModalPortal.js | 17 ++++-------------
 specs/Modal.spec.js           |  9 +++------
 2 files changed, 7 insertions(+), 19 deletions(-)

diff --git a/lib/components/ModalPortal.js b/lib/components/ModalPortal.js
index ad049ae7..0f10e318 100644
--- a/lib/components/ModalPortal.js
+++ b/lib/components/ModalPortal.js
@@ -153,13 +153,10 @@ export default class ModalPortal extends Component {
     }
   }
 
-  handleOverlayMouseDown = () => {
+  handleOverlayOnClick = (event) => {
     if (this.shouldClose === null) {
       this.shouldClose = true;
     }
-  }
-
-  handleOverlayMouseUp = (event) => {
     if (this.shouldClose && this.props.shouldCloseOnOverlayClick) {
       if (this.ownerHandlesClose()) {
         this.requestClose(event);
@@ -170,11 +167,7 @@ export default class ModalPortal extends Component {
     this.shouldClose = null;
   }
 
-  handleContentMouseDown = () => {
-    this.shouldClose = false;
-  }
-
-  handleContentMouseUp = () => {
+  handleContentOnClick = () => {
     this.shouldClose = false;
   }
 
@@ -217,8 +210,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.handleOverlayOnClick}
       >
         <div
           ref={(c) => { this.content = c; }}
@@ -226,8 +218,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.handleContentOnClick}
           role={this.props.role}
           aria-label={this.props.contentLabel}
         >
diff --git a/specs/Modal.spec.js b/specs/Modal.spec.js
index 63e64c3a..af48afe6 100644
--- a/specs/Modal.spec.js
+++ b/specs/Modal.spec.js
@@ -321,8 +321,7 @@ describe('Modal', () => {
         expect(modal.props.isOpen).toEqual(true);
         const overlay = TestUtils.scryRenderedDOMComponentsWithClass(modal.portal, 'ReactModal__Overlay');
         expect(overlay.length).toEqual(1);
-        Simulate.mouseDown(overlay[0]); // click the overlay
-        Simulate.mouseUp(overlay[0]);
+        Simulate.click(overlay[0]); // click the overlay
         expect(!requestCloseCallback.called).toBeTruthy();
       });
 
@@ -338,8 +337,7 @@ describe('Modal', () => {
         expect(modal.props.isOpen).toEqual(true);
         const overlay = TestUtils.scryRenderedDOMComponentsWithClass(modal.portal, 'ReactModal__Overlay');
         expect(overlay.length).toEqual(1);
-        Simulate.mouseDown(overlay[0]); // click the overlay
-        Simulate.mouseUp(overlay[0]);
+        Simulate.click(overlay[0]); // click the overlay
         expect(requestCloseCallback.called).toBeTruthy();
       });
 
@@ -413,8 +411,7 @@ describe('Modal', () => {
       const overlay = TestUtils.scryRenderedDOMComponentsWithClass(modal.portal, 'ReactModal__Overlay');
       expect(overlay.length).toEqual(1);
       // click the overlay
-      Simulate.mouseDown(overlay[0]);
-      Simulate.mouseUp(overlay[0], {
+      Simulate.click(overlay[0], {
         // Used to test that this was the event received
         fakeData: 'ABC'
       });