Overlay mouse up event closes modal

[WemkoDijkhuis]

Summary:

The modal closes unexpectedly. I want the modal to close only on an mouse click on the overlay. But when I do a mouse down event on the content, drag it to the overlay and release the mouse button the overlay is closed. This is a problem for me because we have a slider on the modal page and customers often drag the mouse outside the boundaries of the modal-content.

Steps to reproduce:

1. Do mouse down on conent
2. Drag mouse position to the overlay
3. Release mouse down so that it fires an mouseUp event.
4. The modal closes

Expected behavior:

Modal does not close on an mouseup event

Link to example of issue:

https://codesandbox.io/s/1qzjzzl6wj

Additional notes:

I wanted to create a pull request but my permission was denied. I thought it was open source since the contribution readme. I've got it working by deleting some code that didn't make sense for me.

For example:

handleOverlayOnMouseUp = () => {
    if (this.moveFromContentToOverlay === null) {
      this.shouldClose = false;
    }
    if (this.props.shouldCloseOnOverlayClick) {
      this.shouldClose = true;
    }
  }; 

Here there is a check for moveFromContentToOverlay but the check is overruled by the next check. I removed the moveFromContentToOverlay, handleOverlayOnMouseUp and the onMouseUp of the overlay. And then it worked like a charm.

[diasbruno]

@WemkoDijkhuis To contribute, you can fork react-modal project and push the branch with the fix to your clone. Then you will be able to create a pull request.

This is not a close project and contribution is always welcome.