Touch events pass through menu items

[dennisrahmen]

Bug type

Component

Component name

MudMenuItem

What happened?

@danielchalmers I finally updated my app to the preview-3 of v7 and could now test the behavior.
Sadly, still does not work for mobile, although I am not really sure what the problem is.

Would think it has something to do with the recognition of the mobile touch in general, as you see in the video in mobile view the sub menu does not even open, I just go straight to the links in the submenus.

MS Edge on the dev site and my app has the same issue as described before, the OnClick is not fired:

Menus.-.MudBlazor.-.Personlich.Microsoft.Edge.2024-05-15.02-14-03.mp4

Here is my app, working in desktop view but not doing anything when in mobile:

iTS.Dashboard.und.3.weitere.Seiten.-.Personlich.Microsoft.Edge.2024-05-15.02-26-54.mp4

This is the menu code in my DataGrid:

<TemplateColumn Filterable="false" Sortable="false">
    <CellTemplate>
        <MudMenu Dense="true" Icon="@Icons.Material.Filled.MoreVert" Size="Size.Small" Color="Color.Primary">
            <MudMenuItem IconSize="Size.Small" Disabled="@(context.Item.DeviceType is null)" Icon="@Icons.Material.Filled.AppSettingsAlt" OnClick="() => UpdateDeviceConfig(context.Item)">Konfiguration</MudMenuItem>
            <MudMenuItem IconSize="Size.Small" Disabled="@(context.Item.DeviceType is null)" IconColor="Color.Warning" Icon="@Icons.Material.Filled.Edit" OnClick="() => UpdateDevice(context.Item)">Bearbeiten</MudMenuItem>
            <MudDivider Light DividerType="DividerType.Middle" Class="my-1"/>
            <MudMenuItem IconSize="Size.Small" IconColor="Color.Error" Icon="@Icons.Material.Filled.Delete" OnClick="() => RemoveDevice(context.Item)">Löschen</MudMenuItem>
        </MudMenu>
    </CellTemplate>
</TemplateColumn>

Expected behavior

Should work the same as in Desktop mode.

Reproduction link

https://dev.mudblazor.com/components/menu#nested-menu

Reproduction steps

See videos

Relevant log output

No response

Version (bug)

7.0.0-preview-3

Version (working)

No response

What browsers are you seeing the problem on?

Chrome, Edge

On which operating systems are you experiencing the issue?

Windows, macOS

Pull Request

• I would like to do a Pull Request

Code of Conduct

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

[dennisrahmen]

@danielchalmers had a fix in mind: #8492 (comment)

[danielchalmers]

Ok @dennisrahmen so after taking another look it seems to be a few separate problems:

The nested example doesn't work because Item 2 is an href itself, so clicking it will redirect you to /. It's also using MouseOver as the activation event which only works on touch if you hold it down. If you file a new proposal about it working on mobile in some fashion I'll try and get that done before v7.

For your example I'm not sure what's happening and I would need a sample project or try.mudblazor for it to look further. I'm still interested in fixing it I just need more info.

Would you mind renaming the issue? The events falling through could still be an issue but I was wrong about it being the full cause.

[dennisrahmen]

@danielchalmers is there a dev version of tryMud? Otherwise the link I posted (#8492 (comment)) sometime ago still is showing the issue.

For v7 you would replace all with OnClick of cause.

[dennisrahmen]

I could screenshare on Discord, just ping me if that would help you.

[danielchalmers]

@dennisrahmen Unfortunately no dev version of trymud but that link is working for me on the dev branch

video6.mp4

<MudMenu Variant="Variant.Filled" Color="Color.Error" Label="Open Menu and click item">
    <MudMenuItem OnClick="OnButtonClicked">Click</MudMenuItem>
</MudMenu>

@code {
    [Inject] private IDialogService DialogService { get; set; }

    private async void OnButtonClicked()
    {
        await DialogService.ShowMessageBox("Warning", "Deleting can not be undone!", yesText: "Delete!", cancelText: "Cancel");
    }
}

If you clone the dev branch and get a repro of your issue going I should be able to fix it

[dennisrahmen]

@danielchalmers I am trying to reproduce it in a newly created project but can't figure out what it is that it is not working in my project.

So probably something with my specific setup but weird that it worked flawless before.