Context menu not working with material theme

Radzen.Blazor Components
1

Hi everyone,

I have recently updated to Radzen blazor v5, I am now testing with the different themes and I noticed that when the material theme is active (either dark or normal) the context menu service is not working anymore, I cant seem to replicate it on the demo website. With any other theme it is working fine, that's why I have the feeling it is related to the material theme.

Has anyone seen this behavior before and might know where to look?

Thanks,

2

I have managed to replicate the issue, it happens when a contextmenu is within a tab. Code below the first text field it is working, in the Tab it is not working.

This works correctly if any other theme then material is selected:

<RadzenStack Gap="1rem" class="rz-p-sm-12">
    <RadzenText Text="Right click me" ContextMenu=@(args => ShowContextMenuWithItems(args))/>
</RadzenStack>

<RadzenTabs class="h-100">
    <Tabs>
            <RadzenTabsItem>
                <Template>
                    <RadzenText ContextMenu=@(args => ShowContextMenuWithItems(args)) Text="test" />
                </Template>
                <ChildContent>
                    
                </ChildContent>
            </RadzenTabsItem>
    </Tabs>
</RadzenTabs>

@code {
    void ShowContextMenuWithItems(MouseEventArgs args)
    {
        ContextMenuService.Open(args,
            new List<ContextMenuItem> {
                new ContextMenuItem(){ Text = "Context menu item 1", Value = 1, Icon = "home" },
                new ContextMenuItem(){ Text = "Context menu item 2", Value = 2, Icon = "search", Disabled = true },
                new ContextMenuItem(){ Text = "Context menu item 3", Value = 3, Icon = "info" },
                }, OnMenuItemClick);
    }

    void OnMenuItemClick(MenuItemEventArgs args)
    {
        if (!args.Value.Equals(3) && !args.Value.Equals(4))
        {
            ContextMenuService.Close();
        }
    }
}
3

Hi @Jeroen_oosterom,

This happens because of the built-in material ripple effect.

You can use <RadzenText Style="z-index:2" as shown in this thread until we come up with a better solution/fix -> Radzen tabs close by click - #6 by Vinod_Pillai

4

Thanks a lot! That will work for now!

5

I think we managed to fix it. Should be working with the next release.

1 Like
6

Just tested with the new release and works perfectly! Thanks a lot for the quick fix!

1 Like