Context menu trigger callback doesn't run when the event is prevent defaulted

[nkalpak]

Hello!

I have a google map element which I'm rendering onto a div <div ref={mapRef} />.
I'm looking to trigger the context menu on right-click on the map:

<ContextMenu.Root>
  <ContextMenu.Trigger>
    <div ref={mapRef} />
  </ContextMenu.Trigger>
</ContextMenu.Root>

The issue that I've observed is that google maps will call preventDefault on events triggered by the map div, and I've found that the ContextMenu's onContextMenu callback is wrapped in composeEventHandlers which won't run the Radix event handler if the event has been prevented earlier.

Since the ContextMenu doesn't have a controlled variant, I have to rely on the internal handling of the events in order to open/close the menu, so I wanted to open a discussion to get some ideas on how this can be approached.

[benoitgrelard]

Hey @nkalpak,

Do you know why google maps does this?
What is your current solution right now?
We usually run the composition like this so that users can prevent our defaults, the issue here is that if someone else prevents then that will also happen. We may need to use a custom event instead.

[nkalpak]

Hey @benoitgrelard! Sorry for the late reply, I didn't get a notification for some reason 😬

I believe google maps prevents the default because they need to raise their own events (map right click, for example)
instead of the DOM events, and I'm guessing they don't want the native functionality to interfere with the map.

I currently don't have a solution, I just started working on the map context menu again after about a month.
I'll comment here if I manage to solve it using Radix's context menu!