Skip to content

Commit

Permalink
[fixed] Close modal when mouseDown and MouseUp happen only on the ove…
Browse files Browse the repository at this point in the history
…rlay (reactjs#217)
  • Loading branch information
d-mon- authored and claydiffrient committed Sep 14, 2016
1 parent 6550b87 commit ff09b49
Show file tree
Hide file tree
Showing 2 changed files with 65 additions and 12 deletions.
30 changes: 21 additions & 9 deletions lib/components/ModalPortal.js
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ var CLASS_NAMES = {
var ModalPortal = module.exports = React.createClass({

displayName: 'ModalPortal',
shouldClose: null,

getDefaultProps: function() {
return {
Expand Down Expand Up @@ -128,20 +129,28 @@ var ModalPortal = module.exports = React.createClass({
}
},

handleOverlayClick: function(event) {
var node = event.target

while (node) {
if (node === this.refs.content) return
node = node.parentNode
handleOverlayMouseDown: function(event) {
if (this.shouldClose === null) {
this.shouldClose = true;
}
},

if (this.props.shouldCloseOnOverlayClick) {
handleOverlayMouseUp: function(event) {
if (this.shouldClose && this.props.shouldCloseOnOverlayClick) {
if (this.ownerHandlesClose())
this.requestClose(event);
else
this.focusContent();
}
this.shouldClose = null;
},

handleContentMouseDown: function(event) {
this.shouldClose = false;
},

handleContentMouseUp: function(event) {
this.shouldClose = false;
},

requestClose: function(event) {
Expand Down Expand Up @@ -175,14 +184,17 @@ var ModalPortal = module.exports = React.createClass({
ref: "overlay",
className: this.buildClassName('overlay', this.props.overlayClassName),
style: Assign({}, overlayStyles, this.props.style.overlay || {}),
onClick: this.handleOverlayClick
onMouseDown: this.handleOverlayMouseDown,
onMouseUp: this.handleOverlayMouseUp
},
div({
ref: "content",
style: Assign({}, contentStyles, this.props.style.content || {}),
className: this.buildClassName('content', this.props.className),
tabIndex: "-1",
onKeyDown: this.handleKeyDown
onKeyDown: this.handleKeyDown,
onMouseDown: this.handleContentMouseDown,
onMouseUp: this.handleContentMouseUp
},
this.props.children
)
Expand Down
47 changes: 44 additions & 3 deletions specs/Modal.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -247,7 +247,8 @@ describe('Modal', function () {
equal(modal.props.isOpen, true);
var overlay = TestUtils.scryRenderedDOMComponentsWithClass(modal.portal, 'ReactModal__Overlay');
equal(overlay.length, 1);
Simulate.click(overlay[0]); // click the overlay
Simulate.mouseDown(overlay[0]); // click the overlay
Simulate.mouseUp(overlay[0]);
ok(!requestCloseCallback.called)
});

Expand All @@ -263,10 +264,49 @@ describe('Modal', function () {
equal(modal.props.isOpen, true);
var overlay = TestUtils.scryRenderedDOMComponentsWithClass(modal.portal, 'ReactModal__Overlay');
equal(overlay.length, 1);
Simulate.click(overlay[0]); // click the overlay
Simulate.mouseDown(overlay[0]); // click the overlay
Simulate.mouseUp(overlay[0]);
ok(requestCloseCallback.called)
});

it('verify overlay mouse down and content mouse up when shouldCloseOnOverlayClick sets to true', function() {
var requestCloseCallback = sinon.spy();
var modal = renderModal({
isOpen: true,
shouldCloseOnOverlayClick: true,
onRequestClose: function() {
requestCloseCallback();
}
});
equal(modal.props.isOpen, true);
var overlay = TestUtils.scryRenderedDOMComponentsWithClass(modal.portal, 'ReactModal__Overlay');
var content = TestUtils.scryRenderedDOMComponentsWithClass(modal.portal, 'ReactModal__Content');
equal(overlay.length, 1);
equal(content.length, 1);
Simulate.mouseDown(overlay[0]); // click the overlay
Simulate.mouseUp(content[0]);
ok(!requestCloseCallback.called)
});

it('verify content mouse down and overlay mouse up when shouldCloseOnOverlayClick sets to true', function() {
var requestCloseCallback = sinon.spy();
var modal = renderModal({
isOpen: true,
shouldCloseOnOverlayClick: true,
onRequestClose: function() {
requestCloseCallback();
}
});
equal(modal.props.isOpen, true);
var overlay = TestUtils.scryRenderedDOMComponentsWithClass(modal.portal, 'ReactModal__Overlay');
var content = TestUtils.scryRenderedDOMComponentsWithClass(modal.portal, 'ReactModal__Content');
equal(content.length, 1);
equal(overlay.length, 1);
Simulate.mouseDown(content[0]); // click the overlay
Simulate.mouseUp(overlay[0]);
ok(!requestCloseCallback.called)
});

it('should not stop event propagation', function() {
var hasPropagated = false
var modal = renderModal({
Expand All @@ -290,7 +330,8 @@ describe('Modal', function () {
equal(modal.props.isOpen, true);
var overlay = TestUtils.scryRenderedDOMComponentsWithClass(modal.portal, 'ReactModal__Overlay');
equal(overlay.length, 1);
Simulate.click(overlay[0]); // click the overlay
Simulate.mouseDown(overlay[0]); // click the overlay
Simulate.mouseUp(overlay[0]);
ok(requestCloseCallback.called)
// Check if event is passed to onRequestClose callback.
var event = requestCloseCallback.getCall(0).args[0];
Expand Down

0 comments on commit ff09b49

Please sign in to comment.