Foundation-sites: Drag from inside modal & ending outside closes modal (Chrome, Safari)

[jongilbraith]

What should happen?

When I click and hold anywhere inside a modal, move the pointer outside of the modal and release, the modal should remain open.

What happens instead?

On Chrome (75.0.3770.142, Mac) and Safari (12.1.1, Mac), when I do this, the modal closes.

On Firefox (68.0, Mac) I do not experience this behaviour.

Test Case and/or Steps to Reproduce

This can be reproduced using the examples in the documentation (at version 6.5.3).

How to reproduce:

1. Go to the Reveal documentation.
2. Click on the button in the first example to trigger a modal ("Click me for a modal")
3. Clicking anywhere inside the modal, drag outside the modal, release

Worth noting, when doing the same test on the 5.5.3 documentation this behaviour isn't exhibited.

Context

We've run into issues with this in user testing. A typical scenario is interacting with a login or signup form inside a modal.

When trying to replace the existing contents of a field, users not so adept with the keyboard / mouse will attempt to manually select the contents by clicking at the start and dragging to the right, often just pulling the pointer all the way to the right far past the end of the field.

Encountering this bug, that then closes the modal for them.

Your Environment

• Foundation version(s) used: 6.5.3
• Browser(s) name and version(s): Chrome 75.0.3770.142, Safari 12.1.1, Firefox 68.0
• Device, Operating System and version: Mac, Mojave
• Link to your project: not public

Checklist

• [x] I have read and follow the CONTRIBUTING.md document.
• [x] There are no other issues similar to this one.
• [x] The issue title and template are correctly filled.

[DanielRuf]

Hi @jongilbraith,

I guess this is because of keyup / keydown.

[jongilbraith]

Hi @DanielRuf,

Indeed, looks the case. I looked about and found some general pointers about comparing the elements targetted in mousedown and mouseup. Didn't find anything about differences in other engines, but looks like maybe this is the expected behaviour and Firefox is just a convenient anomaly.

I'd like to take a look at it myself but need to read up on how to set myself for hacking on an npm module, as my abilities with javascript tooling is currently very much reliant on copy/paste. 😄

[DanielRuf]

Hi @jongilbraith,

You have to follow the instructions from the readme for contributors. Clone the repo, install the dependencies and check the scripts in pacjage.json.

[jongilbraith]

Thanks, but I was referring simply to the actual task of getting a local development copy of the module setup so I can hack on it.

I'm primarily a rubyist and we're experiencing the issue in a rails codebase using webpack, but I think I'll have an easier time if I create a test app with node to tackle this.

[DanielRuf]

If webpack uses the unminified source files of Foundation you can simply change the code in there You probably have only the dist files of Foundation. using patch-package or patch or manually and test it this way.

[jongilbraith]

@DanielRuf thanks, I'll check those approaches out when I come to take a look.

[zipzapp]

@DanielRuf @jongilbraith I had a client ux complaint come down the pipe and I traced it back to this issue. I opened up a PR to fix the bug. Can one of the maintainers review it?

[Sumanta9x9]

do the developers actually fix any issue or just defer them?

[Sumanta9x9]

This stupid issue is still happening. may be that's why bootstrap is so much popular. I am in a very bad position in front of my client just because I suggested foundation. never going to use foundation in my life ever again.

[DanielRuf]

@Sumanta9x9 please see https://github.com/foundation/foundation-sites/pull/11816#issuecomment-533637926

PRs which fix this are very welcome.
I do not have the needed free time to create a solution and test it. Please keep in mind that we do that in our free time.

[DanielRuf]

Besides this, you can use any modal library if this works better for you.