material-components / material-components-web

Modular and customizable Material Design UI components for the web
https://material.io/develop/web
MIT License
17.15k stars 2.15k forks source link

Slider gets stuck in drag state when context menu is opened #2973

Open berenddeboer opened 6 years ago

berenddeboer commented 6 years ago

You can move the slider with your finger from a completely different position on the page under certain circumstances.

What MDC Web Version are you using?

0.36.1 (same behaviour in earlier versions).

What browser(s) is this bug affecting?

Can repeat behaviour on Chrome mobile emulation: Version 67.0.3396.87 (Official Build) (64-bit)

Android 7.0.0, Chrome 67.0.3396.87.

iPhone 7: iOS 11/Safari.

What OS are you using?

Ubuntu/iOS 11/Android 7.

What are the steps to reproduce the bug?

On desktop:

  1. Open Chrome tab in mobile emulation mode.

  2. Go to the demo page.

  3. Click (tap) somewhere on the Continuous slider until the context menu opens. Then release mouse button.

  4. Press Esc so the context menu closes.

  5. Click on the "T" in the bottom label "Tick Marks", keep mouse down, and move to the right. Continuous slider now moves, even though you're in a completely different section of the page.

What is the expected behavior?

As soon as you release the mouse, the slider should not be effected by clicking and moving the mouse on a different part of the page.

What is the actual behavior?

But the slider moves in response to mouse even though you ended (that's what it looks like) a previous drag.

On mobile you have similar behaviour, harder to repeat on Android, very easy on Safari.

Makes for extremely awkward page scroll behaviour.

Any other information you believe would be useful?

What happens is that Chrome does not appear to be sending the touchend/pointerend events.

So what appears to happen is that on a long tab an initial drag is started by the slider. If you now release the mouse, this is not recognised. I.e. no touchend is send, so the browser is still in dragging mode. Even if you click on another part of the page and drag that, the drag is still going to the slider.

FireFox is fine as it correctly sends touchend/pointerend.

berenddeboer commented 6 years ago

One more thing, console.log shows:

[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080

kfranqueiro commented 6 years ago

Thanks for reporting this. This sounds like the same category of issue as #1192, but IIUC this one is correlated with the context menu interrupting a drag.

berenddeboer commented 6 years ago

I actually have to admit the bug was primarily in the library I was using. I'm using elm-mdc, a reimplementation of the JavaScript of Material Components Web in Elm.

I thought I could repeat this on the desktop by the instructions above, but it appears the contextmenu was actually different from what happened on mobile. On mobile we were seeing a reversal of the "touchend" and "touchstart" events. The effect appeared to be the same, but the cause was quite different.

So I think the title should be rephrased to say this is now only about the contextmenu, which is not a huge problem for me.

kfranqueiro commented 6 years ago

The way I interpreted the issue was that the opening of the context menu on tap-hold or right-click causes the slider's drag state to "stick". I seem to be able to reproduce this easily even on desktop Chrome. Does this sound accurate?

But yeah, I agree, I'll narrow down the title.

berenddeboer commented 6 years ago

Yes, that's correct. But I thought that would explain the issue on mobile too, but that proved to be a different bug.

kfranqueiro commented 6 years ago

Oh, I see. I hadn't had a chance to test on mobile yet, and you're saying that now the only issue you see in MDC Web itself is specifically the desktop context menu issue that I reproduced?

Edit: I just tested with device emulation in Chrome and the same thing happens with tap-to-hold triggering the context menu (which I would think is essentially the same issue identified for desktop).

berenddeboer commented 6 years ago

Yes, the only issue with MDC Web itself is related to the context menu. Which is basically a Chrome issue I suspect as MDC Web is fine on FireFox.