Slider handle can't be dragged within a Dialog.

[einaralex]

🐛 Bug report

Current Behavior

Touching and dragging the handle on the Slider within a Dialog doesn't cause the handle to move.

Expected behavior

The handle should drag along the Slider track like it does when it's not located in a Dialog.

Reproducible example

CodeSandbox Template
Use this link for the rendered output on a mobile device

Suggested solution(s)

Additional context

It behaves normally with a click event, not touch events.
Reproduced in Chrome on iPhone, iPad & device mode on MacOS.

Your environment

Software	Name(s)	Version
Reach Package	Dialog / Slider	0.11.2
React
Browser	Chrome	Version 85.0.4183.121
Assistive tech
Node
npm/yarn
Operating System	MacOS & IOS	Catalina & 13.6.1

[einaralex]

I've tried it on Safari and Firefox on IOS with the same result.

[tesnouf-drivy]

The same issue occurs with native range input <input type="range" />.

This behavior/issue seems to come from the RemoveScroll feature used in the DialogInner component.
Disabling this feature allow to drag back a slider

[alexeyraspopov]

I can also confirm this bug. I'm going to make a wild assumption, but the reason this bug happens is because slider's touchmove doesn't capture, therefore is prevented by react-remove-scroll:

reach-ui/packages/slider/src/index.tsx

Line 586 in 2f52030

ownerDocument.addEventListener("touchmove", touchListener);

[LiamMyles]

Can confirm I am facing the same issue, but it is only happening with Touch events in my case. It can be emulated in the browser as long as dev tools is set to use touch input.

However, with some effort it can be resolved with the current components.

You can add dangerouslyBypassScrollLock to the DialogOverlay which will remove scroll locking.

This does mean that the user can scroll the background while using the dialog though. So it would be recommended to implement a more custom scroll locking. I haven't in my use case, and I'm not 100% sure of the best way to go about it either.

Read more about it on the docs

I think it would be a nice if the two components could work better together, but maybe in the mean time it might be worth updating the Dialog documentation to point out this conflict with touch scrolling to better direct people towards using dangerouslyBypassScrollLock