[ContextMenu] How to get the open position?

[axelhzf]

I am trying to obtain the position where a ContextMenu is open.

This is what I have so far

<ContextMenu>
  <ContextMenu.Trigger onPointerDown={(e) => {
    // I can read the position here
    const x = e.clientX;
    const y = e.clientY;
  }}>
    <div>context menu area</div>
  </ContextMenu.Trigger>
  <ContextMenu.Content>...</ContextMenu.Content>
</ContextMenu>

by defining an onPointerDown callback I can read the initial position.

The problem is that if I make a new right-click in a different position (while the context menu is open) the onPointerDown event is not called again (I suppose that its because of the portal) but the context menu is moved to the new position.

[benoitgrelard]

Hi @axelhzf, can I ask why you need to get access to the position?
Also you could try onContextMenu instead, that's what we use internally.

[axelhzf]

Thanks @benoitgrelard! using onContextMenu works

My use case: I have an svg that looks like this

I am trying to add interactivity on top of this svg using a single div on top of this svg. The menu should show different options depending on the element you clicked.

[benoitgrelard]

I see, you’re trying to reuse a single instance, rather than multiple instances.

Because these are actual svg elements you could simplify things and collocate an instance of context menu with each element type on the graph using the element as the trigger. This way you don’t have to try and reuse a single instance and populate the menu based on what where you right clicked.

[axelhzf]

Mmm yes, maybe that approach will be easier to implement. I will give it a try.

I am a little bit worried about the performance of having so many menus instead of reusing one.

[benoitgrelard]

It shouldn’t impact performance. Here’s a test you can look at if you’re worried about performance: https://codesandbox.io/s/radix-performance-demo-qxd8o

[axelhzf]

awesome, thanks :)

[faribauc]

If I may, I'd ilke an answer to the original question. My use case that I have an image that shows various markers with x,y coordinates. I'm implemention a context menu over the area to add new items. I wand to prepopulate the x,y coordinates with the position the user right-clicked on the area. Having access to those values would make things much easier than having to calculate it manually. Thanks! :)

Maybe haging the root context menu element to bubble up the mouse event?