MudMenu triggering other menus below

[miguelmachado17]

Bug type

Component

Component name

MudMenu

What happened?

Hello,

I'm currently facing a problem when using the MudMenu in mobile phones. Touch function is not working as expected since it's activating the menu of other card's that reside behind it.

I tried to add @ontouchend:stopPropagation to the MudMenuItem but the problem still occurs.

One thing that i notice wile testing is that this issue only happen whenever the page reloads as WebAssembly

https://github.com/MudBlazor/MudBlazor/assets/85495887/cc756d15-6438-41e9-877d-848db820402f

My code

<MudMenu Class="w-100 h-100" AnchorOrigin="Origin.TopRight" TransformOrigin="Origin.CenterRight" Dense="true">
    <ActivatorContent>
        <MudCard Class="border-l-4 border-solid mud-border-success w-100 h-100" Elevation="25">
            <MudCardContent>
                <MudText Typo="Typo.button">@task.MainTaskId - @task.CustomerName</MudText>
                <MudText Typo="Typo.h6">@task.MainTaskDescription</MudText>
            </MudCardContent>
        </MudCard>
    </ActivatorContent>
    <ChildContent>
        <MudMenuItem IconColor="Color.Success" Icon="@Icons.Material.Rounded.PlayArrow" OnClick="(()=>Start(task))" OnTouch="(()=>Start(task))">Start Timer</MudMenuItem>
        <MudDivider />
        <MudMenuItem IconColor=" Color.Error" Icon="@Icons.Material.Rounded.QrCodeScanner" OnClick="(()=>OpenScan(task.MainTaskId))" OnTouch="(()=>OpenScan(task.MainTaskId))" Disabled="true">Scan Material</MudMenuItem>
        <MudDivider />
        <MudMenuItem IconColor="Color.Primary" Icon="@Icons.Material.Rounded.CameraAlt" OnClick="(()=>OpenPicture(task.MainTaskId))" OnTouch="(()=>OpenPicture(task.MainTaskId))">Take Picture</MudMenuItem>
        <MudDivider />

        @if (task.CustomerGmaps != null || task.ProjectGmaps != null)
        {
            <MudMenuItem IconColor="Color.Warning" Icon="@Icons.Material.Rounded.Directions" OnClick="(()=>OpenDirections(task))" OnTouch="(()=>OpenDirections(task))" Disabled="false">Directions</MudMenuItem>
        }
        else
        {
            <MudMenuItem IconColor="Color.Warning" Icon="@Icons.Material.Rounded.Directions" OnClick="(()=>OpenDirections(task))" OnTouch="(()=>OpenDirections(task))" Disabled="true">Directions</MudMenuItem>
        }
        <MudDivider />
        <MudMenuItem IconColor="Color.Info" Icon="@Icons.Material.Rounded.Info" OnClick="(()=>MoreInfo(task.MainTaskId))" OnTouch="(()=>MoreInfo(task.MainTaskId))">More Info</MudMenuItem>
    </ChildContent>
</MudMenu>

Expected behavior

Touch should not trigger other menus

Reproduction link

https://try.mudblazor.com/snippet/QacyEymHoeXhkgsv

Reproduction steps

1. Create Multiple MudMenus activated by cards
2. Order them as column
3. Click on the cards ...

Relevant log output

No response

Version (bug)

6.19.1

Version (working)

No response

What browsers are you seeing the problem on?

Chrome

On which operating systems are you experiencing the issue?

Windows

Pull Request

• [ ] I would like to do a Pull Request

Code of Conduct

• [X] I agree to follow this project's Code of Conduct

[danielchalmers]

8492 may resolve this. Can you compile and test your code on the dev branch? Alternatively a preview for v7 should be available in the next week or so.

[miguelmachado17]

Just tested on the dev branch and it looks like it's fixed. Thank you!