[fixed] Enable click to close in iOS (#301) (#304)

reactjs · Jan 24, 2017 · 93e1119 · 93e1119
1 parent 75a1aa3
commit 93e1119
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 19 deletions.
diff --git 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,17 +210,15 @@ 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; }}
           style={Assign({}, contentStyles, this.props.style.content || {})}
           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
@@ -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'
       });