BlazorContextMenu
BlazorContextMenu copied to clipboard
stavroskasidis
Problem with context menu inside a component that is used multiple times on the same page
Describe the bug When you add the ContextMenu to a component, and you use this component multiple times on the same page, the context menu does work not anymore. Is shows, but click events and submenu's stop working.
To Reproduce Steps to reproduce the behavior: create a new component, add a ContextMenu to it, add the component to a web page. All works fine Add the same component again to the same webpage, and the ContextMenu stops working.
Expected behavior The ContextMenu works as well if multiple instances of the same component are on a page
Screenshots If applicable, add screenshots to help explain your problem.
Desktop (please complete the following information):
- Windows 11 Pro
- Edge
- 24H2
Additional context
It seems that the problem is in the fact that the ContextMenu uses the ContextMenu.Id for reference, and the 2 instances of the component have the same Id.
As a workaround, you can use a variable for the ContextMenu.Id and assign a unique value to it for the different instances of your component
This is by design, You should not use the same Id in your context menus. Either pass it as a parameter to the parent component or Render the context menu once in a central location, e.g. in App.razor,
I am using a component to show a table with some special presentation. Within this component I am using your context menu. My page has 3 of these tables, and I am using my component 3 times on the same page. If you use a fixed name for the MenuId, this will not work.
I am not sure how to solve this with your suggestions
What worked for me was changing the code in my component from
<ContextMenuTrigger MenuId="MyMenuId">
..
<ContextMenu Id="MyMenuId">
..
</ContextMenu>
to
<ContextMenuTrigger MenuId=@ContextMenuId>
<ContextMenu Id=@ContextMenuId>
...
</ContextMenu>
@code {
private string ContextMenuId = Guid.NewGuid().ToString();
..
}