mwc-slider drag gets stuck

[cannoneyed]

Describe the bug
When releasing the mouse outside of container element, the mwc-slider doesn't cancel it's drag mousemove handling and keeps moving the slider when the mouse is moved back into the container element. The container element is itself a litElement web component so it might have something to do with the mouse event being handled outside of the container's shadow DOM?

To Reproduce
Steps to reproduce the behavior:

1. Begin dragging slider
2. Drag outside of the parent component's boundaries (to the left or right only, vertically is fine)
3. Release the mouse
4. Move the mouse back into the parent component and observe the slider still moving

Expected behavior
I expect the mousemove handler to be immediately cancelled when the user mouseup event happens.

Screenshots

(Releasing the mouse outside of the container, then moving it back in)

Browser Version (please complete the following information):

• OS: MacOS Catalina
• Browser: Chrome
• Version: Latest

[asyncLiz]

I was trying to reproduce this, and I was only able to reproduce it by moving the mouse outside the window's context.

That means moving it entirely outside of the browser, or outside an <iframe> if that's involved (such as the case with jsbin).

https://jsbin.com/befasasuhe/edit?html,output

I can't reproduce if I move to the left/right and release outside of the bordered section but within the iframe context. If I move to the right outside of Chrome's window, the bug occurs. If I move to the left outside of the iframe context into jsbin's code section, the bug also occurs.

Can you confirm this is the case in your situation? Are you using iframes? If not, can you upload a reproduction showing the problem that does not involve iframes?

[cannoneyed]

Nope, not in an iframe - in a lit-element web component. When the mouse is moved outside of the root web component, the behavior happens (the app is built of web components inside other web components).

Hope this helps, I can share a working demo with you next week.

[ernsheong]

I am also seeing this behavior in a Shadow DOM, when cursor leaves the element while dragging, this happens.

[ernsheong]

Here's a link to a Storybook that demonstrates the problem. https://ui.beliantech.com/?path=/story/bt-components--bt-slider

Not sure if it is something that mwc can fix. Thanks a lot in advance

[e111077]

Heya sorry this was fixed upstream a few commits ago. Please try on Canary. Will reopen if it is still an issue in Canary

[e111077]

note: currently the demos on our github pages is running on canary

https://material-components.github.io/material-components-web-components/demos/slider/

[noelklein]

@e111077 this is still an issue. I'm on a macbook with Chrome and can reproduce it on your demo page. When I click on the slider thumb, hold the mouse button, then move the cursor outside of the window and release the mouse button, then it keeps moving the thumb around when moving the cursor back into the window.

[e111077]

Hmm it seems upstream we never actually pointer capture despite checking whether it's iOS or not (since iOS has a bad implementation of pointer capture). This seems like an upstream issue on material-components/material-components-web

see next comment

[e111077]

Can't check whether pointerup is initiated from outside the window. Best we can do is:

1. stop dragging altogether if drag leaves window
2. stop dragging if user clicks off of window

[e111077]

I filed an issue upstream as it's still an issue with the latest version of M2 slider: material-components/material-components-web#7209

[e111077]

checked, our repro was broken. M2 slider does not have this issue. Working on releasing the M2 slider right now.

[noelklein]

@e111077 when can we expect a new npm package version to be available?

[e111077]

within the next few weeks or so. It's working just fine, but test coverage and theming is not there yet.

[noelklein]

@e111077 Is it possible to get a pre-release or canary? How can I help? I'm happy to provide unit tests. Not sure how I could help with theming.

[e111077]

I might be able to ship to canary without tests due to it being a blocker for form submission integration work, but unfortunately the theming is not parallelizable since it's coming straight from the design team

[noelklein]

@e111077 any chance we could get that canary released?

[e111077]

bot auto-releases canary upon commit to main. #2567 is awaiting material-components/material-components-web#7256