Accessibility: Select onMouseDown event outside of Select Menu fails WCAG 2.5.2 Pointer Cancellation

[Watso196]

Bug report

Current Behavior

When the Select menu is open, and the user clicks outside of the Select menu content to close it, this event fires onPointerDown. This means that as soon as the mouse button is depressed, the Select menu closes.

Expected behavior

When the Select menu is open, and the user clicks outside of the Select menu content to close it, this event should fire onPointerUp. This means that the Select menu will not close until the user releases their mouse button outside of the Select content. This allows users to cancel the mouse click operation, and meets WCAG 2.5.2 Pointer Cancellation.

Reproducible example

CodeSandbox Example

Suggested solution

Swap from using onPointerDown event to onPointerUp event

Additional context

WCAG 2.5.2 Pointer Cancellation

Your environment

Software	Name(s)	Version
Radix Package(s)	radix-ui-primitive, radix-ui/react-select	v1.0.1, v2.1.1
React	n/a	18.2.0
Browser	Chrome, Firefox	129.0.6668.59 , 130.0.1
Assistive tech	n/a
Node	n/a
npm/yarn	yarn	1.22.17
Operating System	MacOS	Sonoma 14.7

[bolonio]

Similar issue:

• [Dropdown Menu] WCAG2.2 SC 2.5.2 violation - Dropdown Menu opens on onPointerDown #3124

[Watso196]

Very similar to the issue @bolonio linked! In fact, I think this may be a duplicate of that issue. Thanks very much for pointing that out!