Fixed Dropdown Menu trigger to work only onClick

[unknown503]

Description

Changed onPointerDown event to onClick event which triggers the dropdown only when you click and release the left mouse button.

This was done because when you clicked without releasing the button, the dropdown opened, on pc this was not really an issue, but it was an annoying issue on mobile, where you could be scrolling down and unintentionally pressed any dropdown trigger, causing the menu to show even though it was not intended.

Further explanation can be found on this issue #173 which is closed by this PR. Tests were performed to verify the new changes.

[joaom00]

Hi @unknown503, this change will break a feature where the user can select an item in one lifecycle click (down on trigger, move, up on item)

[unknown503]

Hi @unknown503, this change will break a feature where the user can select an item in one lifecycle click (down on trigger, move, up on item)

on what story is that feature?

[joaom00]

Hi @unknown503, this change will break a feature where the user can select an item in one lifecycle click (down on trigger, move, up on item)

on what story is that feature?

I don't think there is one

[unknown503]

Hi @unknown503, this change will break a feature where the user can select an item in one lifecycle click (down on trigger, move, up on item)

on what story is that feature?

I don't think there is one

Can you tell me how to replicate the feature you mentioned?

[mech]

Can we have an option to use onClick because when I click I can "hold" without release then move to other screen area to reject any menu opening if I change my mind.

[xvvvyz]

I would like to have the menu appear directly above the trigger point and because of onPointerDown it is not possible since whichever menu item appears below your cursor is automatically opened when you release.

I think this should be configurable.

Edit: ended up making it controlled and preventingDefault on the pointer down event.

[chaance]

I think we need to stick with pointer events and distinguish between mouse and non-mouse devices. With a mouse, pointerdown is what we want, per @joaom00's comment. I agree the current behavior is broken for touch interactions.

I dealt with this exact issue in Reach UI, in case you want to reference and update your fix: https://github.com/reach/reach-ui/blob/main/packages/listbox/src/reach-listbox.tsx#L1005-L1019

[chaance]

Fix was merged in Select here, for reference

[iamJoeTaylor]

@chaance the change to Select in the PR you reference doesn't fix the issue in DropDown right?

[unknown503]

@chaance That PR you mentioned doesnt seem to solve the issue on both components, any reason why this PR cannot be merged? The issue is still happening...

[unknown503]

The issue is still open here https://github.com/radix-ui/primitives/issues/1912

[chaance]

This PR changes the behavior entirely, which is why it's closed. The actual solution would be to replicate the fix in https://github.com/radix-ui/primitives/pull/2939. This is on our radar, but PRs that address this without changing the core behavior for mouse users are welcome.