Double submenu opening at the same time

[skillcrushbinguyen]

Describe the bug
A double submenu appear when I fast moving between menu item.
I would like to know anyway to detect the old menu hidden or not before open a new menu. Thank you!

To Reproduce
Steps to reproduce the behavior:

1. Open the context menu
2. Fast moving between menu item has sub menu with some events attach(OnAppearing, OnClick, bla bla)

Source code to demo the problem

<ContextMenuTrigger MenuId="indexMenu">
    <p>Right-click on this text to show a basic context menu sample</p>
</ContextMenuTrigger>
<ContextMenu Id="indexMenu">
    <Item OnClick="@OnClick">Item 1</Item>
    <Item OnClick="@OnClick">Item 2</Item>
    <Item OnClick="@OnClick" Enabled="false">Item 3 (disabled)</Item>
    <Seperator />
    <Item>
        Submenu 1
        <SubMenu>
            @foreach (var num in nums)
            {
                string id = $"1-{num}";
                <Item Id="@id" OnClick="MenuItemOnClickHandler" OnAppearing="MenuItemOnAppearingHandler">@num</Item>
            }
            <Item OnClick="@OnClick">Submenu Item 2</Item>
        </SubMenu>
    </Item>
    <Item>
        Submenu 2
        <SubMenu>
            @foreach (var num in nums)
            {
                string id = $"2-{num}";
                <Item Id="@id" OnClick="MenuItemOnClickHandler" OnAppearing="MenuItemOnAppearingHandler">@num</Item>
            }
            <Item OnAppearing="MenuItemOnAppearingHandler">✖</Item>
        </SubMenu>
    </Item>
</ContextMenu>
@code {
    List<int> values = [1, 2, 3];
    List<int> nums = [1, 2, 3, 4, 5, 6, 7, 8, 10, 11];
    int value;
    void OnClick(ItemClickEventArgs e)
    {
        Console.WriteLine($"Item Clicked => Menu: {e.ContextMenuId}, MenuTarget: {e.ContextMenuTargetId}, " +
            $"IsCanceled: {e.IsCanceled}, MenuItem: {e.MenuItemElement}, MouseEvent: {e.MouseEvent}");
    }

    protected void MenuItemOnAppearingHandler(ItemAppearingEventArgs e)
    {

    }

    protected void MenuItemOnClickHandler(ItemClickEventArgs eventArgs)
    {
        
    }
}

Expected behavior
Only one submenu appear at the same time

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• OS: Window
• Browser chrome
• Version latest

Additional context
Add any other context about the problem here.

[stavroskasidis]

Hello. Thank you for reporting this and for the code sample.
Unfortunately I cannot reproduce the problem with the code sample provided.

Here is the sample project I created to try to reproduce the bug, using your sample code.

BlazorApp2.zip

Can you please download it and make sure you can reproduce it?
If so, can you be more specific on how to reproduce ?

[skillcrushbinguyen]

Hi @stavroskasidis ,
Thank you for responding, the problem is not easy to reproduce and just happens sometimes when you take quick action. I attached the gif to demo the problem and to easily reproduce the problem, you can put this code to the event appearing

protected void MenuItemOnAppearingHandler(ItemAppearingEventArgs e)
{
    string[] disabled = ["1-1", "1-5", "1-7", "1-8", "1-10"];
    if (disabled.Contains(e.MenuItem.Id))
    {
        e.IsEnabled = false;
    }
    
    
    string[] disabled2 = ["2-1", "2-5", "2-7", "2-8", "2-10"];
    if (disabled2.Contains(e.MenuItem.Id))
    {
        e.IsEnabled = false;
    }
}

[skillcrushbinguyen]

@stavroskasidis,
I have an idea to apply the debounce for the mouseover event before showing the sub-menu. So if the user actions so fast the submenu doesn't need to show. Do you have any ideas?