MudMenu: Stop contextmenu event propagation when right-click activation is used

[Cybrosys]

Description

This pull request addresses an issue where the contextmenu event was propagating when right-click activation was used in MudMenu. This caused unintended behavior in scenarios with nested elements.

The PR introduces the @oncontextmenu:stopPropagation modifier to:

1. The MudMenu component's default behavior.
2. The advanced documentation example where a custom div is used to trigger the MudMenu.

This ensures that the event does not propagate to parent elements, preventing conflicts in hierarchical structures.

How Has This Been Tested?

1. Visually: Verified the functionality in the provided documentation example to ensure the stopPropagation behavior works as expected.
2. No unit tests were required since this is a minor behavioral improvement and documentation change.

Type of Changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Documentation (fix or improvement to the website or code docs)

Checklist

• The PR is submitted to the correct branch (dev).
• My code follows the code style of this project.
• I've added relevant tests.

[Cybrosys]

This question might be better suited for a discussion elsewhere rather than as a comment on this pull request, but I was wondering:

Would it be possible to allow dismissing the MudOverlay on a right-click, not just a left-click? Since MudOverlay is encapsulated within the MudMenu component and not accessible externally, what would be a good approach to achieve this?

Potential solutions might include:

• Exposing MudOverlay or relevant parts through MudMenu.
• Adding @oncontextmenu event handling to dismiss the overlay on a right-click.

It could perhaps be tied to if the ActivationEvent is right-click.

What are your thoughts?

[danielchalmers]

This question might be better suited for a discussion elsewhere rather than as a comment on this pull request, but I was wondering:

Would it be possible to allow dismissing the MudOverlay on a right-click, not just a left-click? Since MudOverlay is encapsulated within the MudMenu component and not accessible externally, what would be a good approach to achieve this?

Potential solutions might include:

• Exposing MudOverlay or relevant parts through MudMenu.
• Adding @oncontextmenu event handling to dismiss the overlay on a right-click.

It could perhaps be tied to if the ActivationEvent is right-click.

What are your thoughts?

That seems fairly niche, what is your use case? And yeah a new issue might be a good place to track it.

[Cybrosys]

This question might be better suited for a discussion elsewhere rather than as a comment on this pull request, but I was wondering:
Would it be possible to allow dismissing the MudOverlay on a right-click, not just a left-click? Since MudOverlay is encapsulated within the MudMenu component and not accessible externally, what would be a good approach to achieve this?
Potential solutions might include:

• Exposing MudOverlay or relevant parts through MudMenu.
• Adding @oncontextmenu event handling to dismiss the overlay on a right-click.

It could perhaps be tied to if the ActivationEvent is right-click.
What are your thoughts?

That seems fairly niche, what is your use case? And yeah a new issue might be a good place to track it.

The behavior I want to address is somewhat niche but could be considered intuitive once custom right-click context menus are introduced to a UI. My use case involves displaying items in a tree view and a data grid, each with its own context menu offering various actions. When testing, my instinct was to right-click on one item to show its context menu and then right-click on another item to open its menu as well. However, this caused the browser's default context menu to appear while my custom MudMenu was still displayed. This conflicted with the expectation that only the custom menu should be shown.

Upon investigating, I noticed an overlay element being added to the page. Its purpose seemed to be dismissing the MudMenu when clicking outside of it. My interim solution was to write a script that listens for contextmenu events and, if they occur over an element with the class mud-overlay, prevents the event and triggers a click event to dismiss the MudMenu. While this solution requires a double right-click to switch context menus, it feels less disruptive than having the browser's default context menu appear on elements meant to show custom menus.

Ideally, the behavior should mimic that of a file explorer: right-clicking any item that has a context menu should immediately show that item's menu, closing any other context menu that is already open. This approach would provide a consistent and expected user experience.

By enabling the MudOverlay to dismiss itself without stopping the propagation of the event, maybe that would allow a single right-click to close the currently open context menu and simultaneously open another item's context menu. Such behavior would align closely with user expectations and make the interaction more fluid. But that is mere speculation as I'm not sure how the event will propagate depending on the MudOverlay div.

[Cybrosys]

I crated an issue for it, for further discussion and how this could be implemented in a good way (if at all) #10738

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud