[docs][Slider] Prevent long presses from triggering context menu or text selection #1339
Conversation
…f slider thumb on touch devices
Netlify deploy preview |
✅ Deploy Preview for base-ui ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
onehanddev
requested review from
atomiks,
colmtuite and
michaldudak
as code owners
zannager
added
component: slider
onehanddev
changed the title
|
@onehanddev Would you mind trying to move the styles to the slider-user-select.mp4 |
@mj12albert I’ve applied the styles to all slider elements, as moving them to just the Track didn’t resolve the issue. This is because touch events are registered separately for each element. The issue should now be fully resolved. Let me know if you notice anything else! 😊 |
mj12albert
changed the title
| @@ -4,6 +4,8 @@ | |||
| align-items: center; | |||
| width: 14rem; | |||
| padding-block: 0.75rem; | |||
| touch-action: none; | |||
There was a problem hiding this comment.
👍 makes total sense to put this on Control actually, though it isn't needed on any descendents:
This means that in practice, touch-action is typically applied only to top-level elements which have some custom behavior, without needing to specify touch-action explicitly on any of that element's descendants
https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action
(user-select is though, it doesn't inherit)
There was a problem hiding this comment.
LGTM ~ just need to remove the redundant touch-actions @onehanddev
Though on iOS it seems impossible to fully prevent unwanted text selection in CSS alone, at 9s here I was trying to press the edge of .Control:
RPReplay_Final1737098312.mp4
As described in the RA codebase here:
Safari on iOS starts selecting text on long press. The only way to avoid this, it seems, is to add user-select: none to the entire page. Adding it to the pressable element prevents that element from being selected, but nearby elements may still receive selection. We add user-select: none on touch start, and remove it again on touch end to prevent this. This must be implemented using global state to avoid race conditions between multiple elements.
Fixes #1295
Preview: https://deploy-preview-1339--base-ui.netlify.app/react/components/slider