Add support for long press to MenuTrigger

🙋 Feature Request

MenuTrigger currently supports opening a menu when a user presses or presses the enter or space key on a trigger element (e.g. button). It would be useful to also support opening it on long press instead of immediately. For example, in a toolbar UI, you could switch between multiple tools under the same button by opening a menu on long press. Long press to open a menu is also fairly common on mobile.

💁 Possible Solution

A few steps are required to implement this:

• Add a useLongPress hook to the @react-aria/interactions package. This should make use of usePress under the hood, but add a timer to track how long the user has been pressing and only fire the onLongPress event after a threshold has been met. The keyboard events emitted by usePress should be ignored though, as individual components may wish to have different keyboard shortcuts for activating this behavior.
• Call the useLongPress hook inside useMenuTrigger to handle opening the menu on long press. Also add support for the Alt + arrow key behavior to open the menu instead of the normal Enter/Space/Arrow keys. The trigger="longPress" prop should be added to MenuTrigger to enable this behavior.

🔦 Context

Eventually we will support a hold affordance in Spectrum buttons to show that a menu is available on long press. See https://spectrum.adobe.com/page/action-button/#Hold-icon.

🧢 Your Company/Team

RSP

[devongovett]

Hey @Sunny-Nishan, thanks for taking a look at this!

1. Normally, buttons get triggered when you press the Enter or Space keys. In this case, clicking or activating the button with the keyboard may have a default operation, and long pressing or using Alt + ArrowDown/ArrowUp may activate the alternate operation of opening the menu. Using the Alt key modifier is a way to trigger this alternate behavior.

2. Yes possibly we could use onPressStart. I think the reason it’s a separate keyboard handler is because the behavior is different between the Enter and Space keys. Space doesn’t close the menu when selecting an item whereas Enter always closes it. I don’t think the press events expose which key was pressed. If there’s no way to replicate that behavior, maybe add the repeating check from usePress into that handler as well?

[devongovett]

I did some work on this recently in #2363