Context menu won't open on Firefox

[Maik8196]

I experience an issue on Firefox v84.0.2 (64-bit) in a Blazor WebAssembly application. When i right click on the SVG element that is wrapped by the ContextMenuTrigger component no menu appears. I don't experience this issue on Google Chrome or Microsoft Edge.

Example code:

<svg width="100%" height="100%">
    <ContextMenuTrigger WrapperTag="g" MenuId="menuId">
        <rect width="100%" height="100%" fill="red"></rect>
    </ContextMenuTrigger>
</svg>

<ContextMenu Id="menuId">
    <Item><i class="fas fa-plus fa-fw"></i> Add</Item>
</ContextMenu>

---

Update

Firefox has no support for the 'oncontextmenu' handler on SVG elements. I fixed it this way:

Add the following script to your index.html to disable the default browser context menu.

Script

<script>
    window.attachHandlers = () => {
        var elements = document.getElementsByClassName("disable-default-context-menu");
        
        for (var i = 0; i < elements.length; i++) {
            elements[i].addEventListener('contextmenu', e => {e.preventDefault()});
        }
    };
</script>

Than you can use the contextmenu on SVG items on the following way:

Usage:

<svg width="100%" height="100%">
    <g class="disable-default-context-menu" @onmouseup="@(e => OnRightClick(e))" oncontextmenu="return false;">
        <rect width="100%" height="100%" fill="red"></rect>
    </g>
</svg>

<ContextMenu Id="menuId">
    <Item><i class="fas fa-plus fa-fw"></i> Add</Item>
</ContextMenu>

@code {
        protected override void OnAfterRender(bool firstRender)
        {
            JsRuntime.InvokeVoidAsync("attachHandlers");
        }

        private async Task OnRightClick(MouseEventArgs args)
        {
            if (args.Button == 2)
            {
                await BlazorContextMenuService.ShowMenu("menuId", (int)args.ClientX, (int)args.ClientY);
            }
        }
}

[stavroskasidis]

Couldn't you alternatively just wrap the svg element in a ContextMenuTrigger, like this ?

<ContextMenuTrigger WrapperTag="g" MenuId="menuId">
  <svg width="100%" height="100%">
      <g>
          <rect width="100%" height="100%" fill="red"></rect>
      </g>
  </svg>
</ContextMenuTrigger>

<ContextMenu Id="menuId">
    <Item><i class="fas fa-plus fa-fw"></i> Add</Item>
</ContextMenu>

Anyway glad you found a workaround for your case.