I'd like to prevent the Context Menu from closing when a user clicks on a parent item. The default behavior in most MS applications is that the Context Menu doesn't close after clicking on a parent item.

I have a project with a grid and a context menu.  When I right click on a grid cell, I create a contextual menu based on the name in the grid row.  Then when I run the await ContextMenuRef.ShowAsync(mouseEventArgs.ClientX, mouseEventArgs.ClientY); command, the menu is from the previous right click and previous row.  The actions performed based on the menu choice happen for the right row but the menu itself, it shows previous values.  I have included my mock project for your perusal.  Click on Invoices to get to the page with the problem.

Hello,

Please consider an OnHide event for the ContextMenu. Here is a scenario - the target's styles change when the Menu opens. There is no reliable built-in event that one can use to revert the styles back. The user can click on a Menu item, but they can also click somewhere else or hit Escape.

Currently, a possible workaround is to listen for clicks and keypresses on the document with JavaScript:

https://blazorrepl.telerik.com/mclcPUbJ49jerlsh57

 

Based on the sample app "BlazingCoffee" (where you can reproduce this bug), when I add a ContextMenu in the grid Sales, using OnRowContextMenu of TelerikGrid, there's an asynchrony in the behavior of telerik-blazor.js when it open the popup of the ContextMenu and when it try to focus it.

The bug consists in the fact that when I have a vertically long grid, with an active scrollbar, if I right-click on the first row to open the ContextMenu, the app first try to focus it, does not find it, then scroll the page to the bottom and after all this it open the popup of the ContextMenu in the right position. So you need to scroll back to row where you right-clicked to visualize the ContextMenu. 

In general, it try always to focus to the first element of the ContextMenu and after that it open the new ContextMenu in the right position, letting it focus the page in the wrong position.

WORKAROUND:
To solve this wrong behavior I deleted the last line of code of the method "focusFirstMenuItem" of "telerik-blazor.js". If I remove "t&&t.focus()", the ContextMenu works perfectly, without unwanted scrolling.

I hope you can resolve this soon.

 

Angelo Marzullo

 

P.S. Telerik version: 2.24.0

If I add a target element after initialization, the ContextMenu cannot be opened for it. It seems like the ContextMenu cannot work with dynamic targets.

Reproduction: https://blazorrepl.telerik.com/wyaKvxaM02UinTjJ35.

===

ADMIN EDIT

===

A possible workaround is to dispose and recreate the ContextMenu after adding the new element during runtime: https://blazorrepl.telerik.com/coaUvdYs153SKyiQ29.

I would like to be able to hide the context menu when I scroll the browser. 

If you open a child menu via the keyboard, you can then hover over another parent and open a second submenu. The problem can be reproduced in the live demo.

===

ADMIN EDIT

===

The issue targets the Menu component as well.

Example use case is to have a context menu bound to a form item. The form item would re-render on submit that would change the dom element.

Example: https://blazorrepl.telerik.com/mxEnmnaV09ahp4EB15

Workaround: https://blazorrepl.telerik.com/mxkxwHOr08fcjSKK39

Is it possible to get the same slide-down animation in the right-click context menu, that you see when you click one of the column filters in Grid? If not can you please add a feature request for that?