Pass triggering event on ContextMenu.Trigger to event handler

Feature request

Overview

My application includes a map, which can be right-clicked in order to bring up more details. The map is rendered with WebGL, so is basically opaque to React. I’d like to be able to use the ContextMenu component and show more details about what was right-clicked. To make this possible, it would be nice to pass the event that triggered the context menu open to a method that looks up map details.

Who does this impact? Who is this for?

This will be nice if any of the things that trigger a context menu are, well, contextual to what was right-clicked. This map example is certainly one, but something like having one context menu at a top element and using, basically, delegation to trigger different right-click menus, would be an example.

Additional context

API might look like:

<Root onOpenChange={((open: boolean, event: React.MouseEvent | React.PointerEvent))}>

[jjenzz]

So I’m thinking perhaps we raise a custom event/callback for when we generally detect an event (context menu or long press) that should open the menu.

We already have an onOpenChange that triggers when that happens so it sounds like the combination of the two is what is needed?

export default () => {
  const pointRef = React.useRef<number[] | null>(null);

  return (
    <ContextMenu.Root
      onOpenChange={(open) => {
        if (open) {
          queryRenderedFeatures(pointRef.current);
        } else {
          pointRef.current = null;
		}
      }}
    >
      <ContextMenu.Trigger
        as="canvas"
        onContextMenu={(event) => (pointRef.current = [event.clientX, event.clientY])}
      />
      <ContextMenu.Content>
        <ContextMenu.Item>One</ContextMenu.Item>
        <ContextMenu.Item>Two</ContextMenu.Item>
        <ContextMenu.Item>Three</ContextMenu.Item>
      </ContextMenu.Content>
    </ContextMenu.Root>
  );
}

https://codesandbox.io/s/weathered-bash-2ze4e

[tmcw]

I’m curious cause you say it’s basically a webGL thing, opaque to React. Would you be working out what to show based on the pointer position in the event?

Yep, exactly this. In particular, using Mapbox, which gives you a method to query features at a particular point within the WebGL canvas, based on the offset from the top-left corner.

If you’re wanting to render information about something then it’s probably not the appropriate use of the ContextMenu component which is meant for menus.

This will be a menu - basically, think of it as the same as the right-click menu on Figma. For example: right click on a stack of overlapping features and choose which feature to select.