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

[AlisCode]

trafficstars

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]

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

[SpasiboKojima]

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 :(

[LeoLTM]

I have the same issue

[ahussein3]

Any updates on this issue like when it will be fixed or a timeline for it. Is it from Radix side or from Firefox side ? Can you help here @benoitgrelard .