onMouseDown() vs onClick()

[kevinmitch14]

Looking through behaviour of the components I notice that some use onMouseDown() while some use onClick(). For example a DropdownMenu, Select and Tabs use onMouseDown() which feels more instant in some cases.

I also saw this mentioned in https://interfaces.rauno.me/

To open immediately on press, dropdown menus should trigger on mousedown, not click

Is there a criteria that is followed for deciding when to use one or the other?

For example: I am currently using cmdk + Radix Dialog to create a combobox-type component. It basically looks and feels like a dropdown, so maybe I should trigger open/close with onMouseDown instead of the default Dialog behaviour. Interested to hear your thoughts and design choices!

[benoitgrelard]

Hey @kevinmitch14,

Note that first of all those decisions/implementation details are mostly coming from @radix-ui/primitives rather than @radix-ui/themes.

The reason we sometimes use pointer down rather than click is usually for certain usability features which exist in native counterparts and we felt were really nice to match. One example with menus and selects in particular is that you can be efficient and do everything in one action as opposed to needing 2 separate clicks:

• pointer down on the trigger
• move your pointer to whichever item you want (even scrolling select by moving over the scroll buttons)
• release pointer over the wanted item

[kevinmitch14]

Interesting, thanks a lot!

[nicooprat]

@benoitgrelard I'm having issues with the Vue port of Radix related to this behavior, discussion here: unovue/radix-vue#1448. As it's based on your work, I'm answering here too.

There can be edge cases where using mouse/pointer down events can interfere with other behaviors that use click for instance (in my linked example, changing tabs makes the modal smaller, then a click event is triggered when it's released on the modal overlay, thus closing it in the same event).

What's more, I'm currently attending an accessibility training, and we have been told that "click" events should always be preferred by default, because some disabled users might misclick, and it gives them the opportunity to cancel their click by releasing the mouse outside the element.

Only special cases allow using "down" events: for instance, the keydown event is needed to prevent the tab key default behavior (so focus can be better managed, like in focus traps).

For the example you gave, it seems that MacOS actually behaves like you described for dropdowns, and I can clearly see the UX bonus. But for tabs, I didn't found any occurrence, it seems MacOS waits for the release event to trigger it.

So would you be open to use click for the Tabs component?