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

…ctjs#313)
DaveVanVliet · Feb 20, 2017 · 4232477 · 4232477
1 parent 3ada4fb
commit 4232477
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 18 deletions.
diff --git a/lib/components/ModalPortal.js b/lib/components/ModalPortal.js
@@ -130,13 +130,11 @@ var ModalPortal = module.exports = React.createClass({
     }
   },
 
-  handleOverlayMouseDown: function(event) {
+  handleOverlayOnClick: function (event) {
     if (this.shouldClose === null) {
       this.shouldClose = true;
     }
-  },
 
-  handleOverlayMouseUp: function(event) {
     if (this.shouldClose && this.props.shouldCloseOnOverlayClick) {
       if (this.ownerHandlesClose())
         this.requestClose(event);
@@ -146,11 +144,7 @@ var ModalPortal = module.exports = React.createClass({
     this.shouldClose = null;
   },
 
-  handleContentMouseDown: function(event) {
-    this.shouldClose = false;
-  },
-
-  handleContentMouseUp: function(event) {
+  handleContentOnClick: function () {
     this.shouldClose = false;
   },
 
@@ -189,17 +183,15 @@ var ModalPortal = module.exports = React.createClass({
         ref: "overlay",
         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: "content",
           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
@@ -295,8 +295,7 @@ describe('Modal', function () {
         expect(modal.props.isOpen).toEqual(true);
         var 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();
       });
 
@@ -312,8 +311,7 @@ describe('Modal', function () {
         expect(modal.props.isOpen).toEqual(true);
         var 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();
       });
 
@@ -378,8 +376,11 @@ describe('Modal', function () {
       expect(modal.props.isOpen).toEqual(true);
       var overlay = TestUtils.scryRenderedDOMComponentsWithClass(modal.portal, 'ReactModal__Overlay');
       expect(overlay.length).toEqual(1);
-      Simulate.mouseDown(overlay[0]); // click the overlay
-      Simulate.mouseUp(overlay[0]);
+      // click the overlay
+      Simulate.click(overlay[0], {
+        // Used to test that this was the event received
+        fakeData: 'ABC'
+      });
       expect(requestCloseCallback.called).toBeTruthy();
       // Check if event is passed to onRequestClose callback.
       var event = requestCloseCallback.getCall(0).args[0];