[Slider] component cannot be dragged if parent element uses `e.preventDefault()`

[eliassotodo]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/s/hardcore-silence-ywxfbo?file=/src/App.js

Steps:

1. Stop propagation of "mousemove" on the parent of the slider i.e.onMouseMove={(e) => e.stopPropagation()}
2. Try to drag the thumb of the slider

Current behavior 😯

Slider thumb cannot be dragged.

Expected behavior 🤔

Slider should work no matter if one stop propagation in some parent of the Slider

Context 🔦

The Slider component has a parent way up on the three that needs to prevent propaggation of events. I cannot use the slider :(

Your environment 🌎

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

[michaldudak]

We set a mousemove event handler on a document, so we can still detect the movement when a user's pointer leaves the thumb area while dragging. I think we could overlay an invisible div covering the whole viewport on top of everything once the thumb is clicked and use it to detect mouse movement. This way, the events won't have to propagate all the way back to the document.

cc @mui/core for thoughts

[eps1lon]

Might be interesting to revisit pointer capture again. That's what we're effectively pollyfilling here. But I didn't pursue back then due to browser bugs/lack of support. So depending on your supported browsers, it might be worth checking out Pointer Events and setPointerCapture

[michaldudak]

Good point, thanks. From the browsers we target only iOS Safari 12.5 seems not to support pointer capture (https://caniuse.com/mdn-api_element_setpointercapture). We will revise the supported browsers for v6 for sure, so we should be able to implement this without polyfills then.