MudMenuItem trigger elements behind itself on touch devices

[Mikeux]

Bug type

Component

Component name

MudMenuItem

What happened?

When we create MudMenu with MudMenuItem components and start use in touch devices (tablet, or device emulator in any browser on desktop) then touch events forward to elements behind that. Unfortunately, it cannot be used this way, because any link, tab, or other html elements, that are behind MudMenuItem will be triggered by touch event. Click event works fine, so if we switch to desktop mode it works. When i replace MudMenuItem with MudNavLink then it works fine, though in that case menu not closing automatically itself.

Expected behavior

When we use touch on tablet/mobile devices it should not trigger any element behind on menu.

Reproduction link

https://try.mudblazor.com/

Reproduction steps

0. Check all followings in touch mode: use tablet, or device emulator in edge/ff/chrome
1. Create buttons
2. Create MudMenu with MudMenuItem components
3. If MudMenu open in popover mode then buttons that created in first step should behind menuitems
4. Click on menu items and check buttons will catch touch event even it should not

Relevant log output

No response

Version (bug)

6.0.10

Version (working)

No response

What browsers are you seeing the problem on?

Firefox, Microsoft Edge

On what operating system 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

[TheDusty01]

You can try to explicitly specify the OnTouch parameter which should work

[mckaragoz]

We know menu has some issues. Touch is one of them. Probably will fix soon.

[mckaragoz]

Could you test it again with last dev?

[rhyskoedijk]

I've run in to this same issue in v6.0.11. Using Dusty's suggestion worked for me (although it is still a bit janky)

This only works on pointer devices:

<MudMenuItem OnClick="DoSomething" />

This works on pointer and touch devices:

<MudMenuItem OnTouch="DoSomething" OnClick="DoSomething" />

It would be nice if there was a device agnostic event callback so that I only have to define one "menu item was selected" callback. e.g.

<MudMenuItem OnSelected="DoSomething" /><!-- click it, touch it, yell at it, just whatever... -->

[mkb13]

This is still happening to me with 6.0.13. Adding OnTouch= does not fix the problem originally reported by the OP. The touch registers but with the elements behind the menu.

[ketelsb]

This is still happening to me with 6.0.13. Adding OnTouch= does not fix the problem originally reported by the OP. The touch registers but with the elements behind the menu.

Same issue. When you click a MudMenuItem triggered by OnTouch, it clicks on the item beneath it. Really annoying when the item beneath is also a clickable object that navigates to another page.

The menu gets closed to quickly before it has time to execute the command and event. I solved it by creating my own MenuItem component and adding await Task.Delay(100); above the MudMenu.CloseMenu(); in the OnTouchHandler.

[luizpires]

This is still happening to me with 6.0.16. The menu opens at the top of the form and occupies the entire horizontal extent of the form.

[kdurkin77]

This still seems to be happening in 6.1.2. Using OnTouch does not work when you have a scrollbar as it will select the item you touched to start the scroll as soon as it's released

[nvgogh]

Same here. Latest version and on click in the MudMenuItem the menu is closed and the item behind the menu it touched.

[tomasz-soltysik]

Still has this issue on 6.1.5. Does anyone have idea how to solve this? I guess adding ontouchend:stopPropagation won't solve this.

[mckaragoz]

Can someone provide an try.mudblazor snippet? I have an idea but need to test on a problematic example.

[tomasz-soltysik]

We have this issue when adding MudMenu inside table row with row onclick set to e.g. navigate to details page.

[sveins12]

I solved it by replacing the MudMenuItem elements with MudListItem elements (Version 6.1.7).

[tomasz-soltysik]

Used workaround with MudListItem components, just had to wrap OnClick to close menu when any option is clicked.

[KalleKalve]

I also used a workaround with MudListItem components. To close the Menu, I added @ref="mudMenu" for the <MudMenu @ref="mudMenu"/> and something like:

private MudMenu mudMenu;
private void OnClick(MouseEventArgs args)
{
    mudMenu.CloseMenu();
}

Now works with mouse Clicking and Touchscreens regardless if there is any component behind the MudListItem.

[czlatea]

The issue is still there on 6.11.0 https://try.mudblazor.com/snippet/wYcxPPFDmkJTmqSk

I have created a new issue https://github.com/MudBlazor/MudBlazor/issues/7784

[alensiljak]

Confirming this is still happening in 6.11.1. Fortunately the workaround is functional. A little bit more plumbing but does the job.

[alensiljak]

Can't help but wonder why the Menu Items need a separate Touch event? It seems to overcomplicate things as it technically does not make a difference whether the user touches or clicks an item. It is done through a whatever interface a device offers. I'm obviously not seeing the whole picture but I'm having trouble imagining a scenario where we would want to separate Touch and Click, whether on a PC or on a mobile device. The only device where it would make sense would be something like the new laptops that have digital pens for Clicking and recognize fingers for Touching. That would really be a niche reason for the separation of events, though.

[czlatea]

Starting with 6.11.1 you can use a single event called OnAction.

[henon]

Confirming this is still happening in 6.11.1. Fortunately the workaround is functional. A little bit more plumbing but does the job.

@alensiljak Does the new OnAction handler fix the issue for you?

[alensiljak]

@alensiljak Does the new OnAction handler fix the issue for you?

Unfortunately, it does not. On a mobile device (or even just in the Responsive Design Mode in Firefox debugger) it still triggers the control below the menu item.