React-modal: Dragging inside modal and release outside of modal closes the modal

[jameskraus]

Summary:

Dragging inside modal and release outside of modal closes the modal

Steps to reproduce:

1. Drag something inside of a modal
2. Release the mouse outside the modal
3. Modal closes due to detecting a "click" outside the modal

Expected behavior:

Modal should not respond to mouse up that didn't start inside of the overlay

Link to example of issue:

https://codesandbox.io/s/mgwy6V6E

Additional notes:

I noticed this while using a draggable interface component inside of the modal. It's natural to sometimes overshoot the modal and drag onto the overlay. This results in an unexpected close of the modal.

[denisftw]

Hi @jameskraus

Yeah, that's pretty annoying.

I stumbled upon the same issue recently after replacing a regular textarea with a Draft.JS component in my modal dialogs. I wonder if you know how to solve it. I was thinking of catching overlay clicks, but apparently react-modal doesn't currently provide this callback.

[denisftw]

This is probably related #383

[tsmirnov]

It seems, it worked well before. Example from official documentation uses version 1.6.2.
Here is the same example, but with the latest version 2.2.2:
https://codesandbox.io/s/9rkADGWz
As you can see, if you select text in the window and mouseUp out, the window will be closed

I think the cause might be in #217. The bug first appeared in v1.7.0.

Rollback to v1.6.5 fixes the issue, but you will have minor warning in console, since it uses deprecated React.createClass

[denisftw]

Hi @tsmirnov

Indeed, 1.6.5 works!

What's interesting is that #217 says this:

If the user perform a mouse down on the content, then a mouse up on the overlay: do nothing

Sounds like the original idea was not to close the modal, but this is exactly what's happening.

[diasbruno]

@tsmirnov Thank you for tracking down the issue.

@tsmirnov @denisftw There is a test for this behavior, kinda weird we have a regression on this...Any extra information about this (browser version...)?

[tsmirnov]

@diasbruno I am on Mac.
Chrome Version 60.0.3112.78
Safari Version 10.0.3 (12602.4.8)

But I don't think this is related to browser version. All people in my office experience that issue.

[diasbruno]

@tsmirnov ok.

[tsmirnov]

@diasbruno I created pull request with the fix. When it can be added to release package?

[diasbruno]

@tsmirnov Awesome. It looks good. We have some PRs to merge too, so later I'll release a new version.

[diasbruno]

@denisftw @jameskraus A fix is available on v2.2.4.

[denisftw]

@diasbruno Awesome! I've just updated the package and can testify that it works perfectly :+1:

Thanks @tsmirnov and @diasbruno !