[Slider] Holding the thumb after pointerdown on touch devices opens context menu

[mj12albert]

Devtools responsive mode:

Screen.Recording.2025-01-07.at.6.36.51.pm.mov

iOS:

RPReplay_Final1736235686.MP4

[mj12albert]

Probably a long press is causing this

[onehanddev]

Hi @mj12albert,
I would love to debug and fix this issue, can you please assign it to me ? Thanks !

[mj12albert]

I think there's two ways we could go about this:

1. Leave it to the user to use user-select: none on the thumb. Radix puts it on the Root in their docs demo. For us it would have to be on the thumb in order to not interfere with selecting text rendered by Slider.Value.

2. Try to suppress the context menu without interfering with text selection, even if the thumb renders text, like RA does: https://github.com/adobe/react-spectrum/blob/main/packages/%40react-aria/interactions/src/textSelection.ts . This could get pretty complicated, IMO even if the thumb renders text I'd almost never try to or want to select the text? A similar situation as our tabs demo applying user-select: none unconditionally on the Tab: https://github.com/mui/base-ui/blob/master/docs/src/app/(public)/(content)/react/components/tabs/demos/hero/css-modules/index.module.css#L29

[colmtuite]

Option 1 seems fine

[mj12albert]

@onehanddev We decided to just handle it using user-select in the demo styles, are you still interested in making a PR?

[onehanddev]

@mj12albert Sure, I will be creating the PR, Can you please assign it to me ?

[onehanddev]

Hi @mj12albert, I might be overlooking something, but applying user-select: none; on Slider.Thumb or any ancestor elements doesn’t seem to resolve this issue. I also tested similar behavior on the Radix UI and React Spectrum demo pages, and the context menu still opens when pressing and holding on a touch screen device. Here’s a screen recording demonstrating the issue.

Screen.Recording.2025-01-14.at.8.27.37.PM.mov

[colmtuite]

@onehanddev It needs touch-action: none; too

[onehanddev]

It tried that too but it still didn't work. Is it working for you ? @colmtuite

[colmtuite]

@onehanddev dev tools emulator is not reliable. Testing Radix on iOS it seems to work ok.

[onehanddev]

@colmtuite Yeah, I was able to reproduce it in mobile device, and raised the PR, please feel free to review it, Thanks !