fix(modal): update backdrop to close on mousedown/touchstart

[lucasklaassen]

Closes #1950
Re-opens #2142

The click event was replaced with touchstart and mousedown. This way the modal closes only when the backdrop was clicked directly and did not start anywhere else, as described in the bug report.

[lucasklaassen]

@pkozlowski-opensource this definitely fixes the issue. I've tested this manually on desktop and on mobile devices using an iPhone emulator.

The change from using (click) to (mousedown) and (touchstart) prevents clicks from triggering the dismiss action on the modal when the user clicks inside of the modal first -> drags their mouse -> and then releases outside of the modal.

This is super helpful since people sometimes select text, inside of a modal. If they select text and drag their cursor a little bit farther than the modal itself, it will close the modal. If the user is building an object in the modal, this dismiss action can be quite costly to them and very annoying.

[ymeine]

Hello,

Weirdly, the tests seem to be failing the same way as before on Travis.

Anyhow, I realized that we might not want to take this feature as is, because it changes the user experience: instead of dismissing the modal on release of the mouse pointer, it will as soon as it is pressed. This might be unwanted.

Another argument is that we are usually following the Bootstrap specs, and this PR is not matching it.

If you are still willing to fix the original issue but to comply to the Bootstrap way, you might want to apply the same technique they are using there: bootstrap/modal.js at ceffc3a5fd7af7609150048f0651f025ef19672c · twbs/bootstrap.

I didn't check more than that, but as far as I understood, they applied a common technique which is to watch for mouse events and track the target elements. That way, when the release of the mouse pointer occurs (on click), it is possible to determine whether it corresponds to a real user action of dismissing the modal or not (by checking the initial and final targets somehow).

[maxokorokov]

Hey @lucasklaassen,

Thank you for stepping in on this issue.

I've reviewed this and there are several problems here:

• with (touchstart), once the modal is opened, if you tap on the backdrop above the button that triggered modal opening → it will close and immediately reopen
• with (mousedown) modal is closed too early, should be on mouseup as done in bootstrap

So I've actually opened an alternative PR that replicates bootstrap behavior exactly: #3457

[maxokorokov]

Closing in favor of #3457