Positioning popovers relative to a virtual element (support right-click context menus)

[tryggvigy]

Provide a general summary of the feature here

Hey folks, I wanted to gauge interest in having first class support in react-aria / react-aria-components for patterns like right click context menus.

Perhaps this should only be supported for menus, in that case it could perhaps be supported via a new trigger-type

<MenuTrigger trigger="contextmenu">

🤔 Expected Behavior?

The first child of MenuTrigger could be any element that receives a onContextMenu prop to trigger it's menu on 'contextmenu' events.

There is probably a way to describe this functionality more accurately in the lower layers of react-aria and react-stately but I'm fairly new to this library and not familiar enough with the architecture :smi

😯 Current Behavior

Currently right click menus can be implemented by replacing the trigger ref with a {getBoundingClientRect: () => DOMRect } type and continuously updating the position of that DOMRect based on the mouse click coordinates. See code sandbox below

💁 Possible Solution

I don't want to speculate too much on the details of how the API should be structured since I've not spent enough time thinking about it. But one way would be

<MenuTrigger trigger="contextmenu">
  {/* The component that gets onContextMenu handler.
        Does not need to be interactive. */}
  <Box />
  {/* The menu to pop up */}
  <MyMenu />
</MenuTrigger>

🔦 Context

The usecase is to implement UIs similar to the native MacOS context menus

or figmas context menus

See floating-ui docs about virtual elements https://floating-ui.com/docs/virtual-elements

💻 Examples

They can be implemented with some effort since react-aria is so incredibly flexible (love that).

See code sandbox

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[snowystinger]

I don't think we have a big interest in supporting context menus. Mostly because they are only for mouse users and are frequently (not on purpose though) used without other input methods being considered. It's a bit of a slippery slope argument though, so I won't say never. Only that it's not a priority. Linking to related Issue https://github.com/adobe/react-spectrum/issues/5020

[tryggvigy]

That's fair. It's possible albeit a bit awkward to do context menus today. Feel free to close this issue 👍

[devongovett]

FWIW, this could be made easier to do, but it is possible to implement today using the offset and crossOffset props props on Popover. Basically force the placement to always bottom left, and then adjust the offset relative to that.

https://stackblitz.com/edit/rac-context-menu?file=src%2FApp.tsx