Support drag-to-select on select/menu.

[latin-1]

Motivation

Sorry I don't know the exact name of this UX.

It's a common pattern and should be supported in Ariakit.

Usage example

• Browsers' native <select> and menu/context menu.
• React Spectrum (Picker and Menu)
• Radix UI (Select, Dropdown Menu and Context Menu)

Possible implementations

No response

[diegohaz]

Thanks for suggesting this feature @latin-1.

We've tried this at some point in the past and observed it had some inconsistent behaviors (especially when you consider touch devices, different/multiple pointers, and swipe to scroll). So we decided to support only full clicks by default.

Nonetheless, this behavior is not a standard across all platforms. Windows, for example, doesn't work like that.

That being said, if you really need this behavior in your app, you can do this by opting out of the default behavior and adding the event handler yourself:

<SelectItem
  value="Banana"
  hideOnClick={false}
  setValueOnClick={false}
  onMouseUp={() => {
    select.hide();
    select.setValue("Banana");
  }}
/>

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.