search

radix-ui / primitives

Radix Primitives is an open-source UI component library for building high-quality, accessible design systems and web apps. Maintained by @workos.
https://radix-ui.com/primitives
MIT License
14.87k stars 722 forks source link

[Slider][ScrollArea] Releasing the pointer over a button wrongly triggers an onClick event in Firefox #2777

Open AlisCode opened 3 months ago

AlisCode commented 3 months ago

Bug report

Current Behavior

Using Firefox (the bug can not be reproduced on Chromium), when dragging a Slider (or a ScrollArea scrollbar), if I keep the pointer down (mouse, in my case) and move it on top of a button, the button's onClick action is triggered. This does NOT happen on Firefox mobile, only desktop. This is also reproducible on Radix's official documentation, see the videos below.

https://github.com/radix-ui/primitives/assets/12024408/2d3712cb-a193-4d5b-9de7-1e21651ccfc7

https://github.com/radix-ui/primitives/assets/12024408/507df6a2-cec0-40e9-b171-a93a7fb07820

Expected behavior

I expect the button to not trigger, since I'm dragging a slider, not trying to press a button. On top of that, if I click anywhere on the page and move my mouse over the button, the onClick action does not trigger, so the behaviour IS due to the slider/scrollbar.

Reproducible example

See the example above, this is reproducible on the docs too : https://www.radix-ui.com/primitives/docs/components/slider. I can maybe provide a CodeSandbox link if important? I've never tried using that myself.

Suggested solution

I don't have a solution yet. See "additional context" for my investigation.

Additional context

I've read the implementation of Slider, it looks like Radix uses setPointerCapture, hasPointerCapture and releasePointerCapture. I tried locally to remove setPointerCapture, which broke the slider, but the bug didnt reproduce after.

Upon looking at similar issues, I have noticed that the default event.pointerId is 1 in Chromium, and 0 in Firefox, which can lead to issues if !event.pointerId was used somewhere, for example, as !0 is true in JS of course. Not sure how relevant that is for this issue ?

Your environment

Software Name(s) Version
Radix Package slider @radix-ui/react-slider 1.1.2
Radix Package scrollarea @radix-ui/react-scroll-area 1.0.5
React n/a 18.2.0
Browser Firefox 122
npm/yarn npm 10.4.0
Operating System Linux 6.5.5
DiederikvandenB commented 2 months ago

I am also experiencing this issue. Would love to see this fixed.

SpasiboKojima commented 2 months ago

That kinda breaks the whole component it's used in if there's an onClick handler on it, because I have a selectable card with slider and I can't think of any workaround :(