@inject IJSRuntime _js

@* Move to a real location, this hack overrides Blazor component errors to keep the snippet concise *@
<script suppress-error="BL9992">
    function hideMenu(menuClass) {
        setTimeout(function () {
            var menu = document.querySelector("." + menuClass);
            var menuParent = findParentByClass(menu, "k-animation-container");
            if (menuParent) {
                menuParent.dispatchEvent(new KeyboardEvent('keydown', { 'key': 'Escape' }));
            }
        }, 50);
    }

    function findParentByClass(elem, targetClass) {
        var cur = elem.parentNode;
        while (cur && !cur.classList.contains(targetClass)) {
            cur = cur.parentNode;
        }
        return cur;
    }
</script>

<div class="menuTarget">
    right click this target
</div>

<TelerikContextMenu Data="@MenuItems" @ref="@TheContextMenu" Selector=".menuTarget" Class="@menuClass">
    <Template>
    
            <TelerikButton OnClick="@HideMenu">Hide Menu</TelerikButton>
        
    </Template>
</TelerikContextMenu>

@code {
    string menuClass = "my-context-menu";
    async Task HideMenu()
    {
        await _js.InvokeVoidAsync("hideMenu", menuClass);
    }

    // sample data binding

    public List<ContextMenuItem> MenuItems { get; set; }
    TelerikContextMenu<ContextMenuItem> TheContextMenu { get; set; }
    bool UseSpecialMenu { get; set; }

    async Task ShowContextMenu(MouseEventArgs e)
    {
        await TheContextMenu.ShowAsync(e.ClientX, e.ClientY);
    }

    // generate sample data for the listview and the menu
    protected override void OnInitialized()
    {
        MenuItems = new List<ContextMenuItem>()
    {
            new ContextMenuItem
            {
                Text = "More Info",
                Metadata = "info"
            },
            new ContextMenuItem
            {
                Text = "Special Command",
                Metadata = "special"
            }
        };

        base.OnInitialized();
    }

    public class ContextMenuItem
    {
        public string Text { get; set; }
        public string Metadata { get; set; }
    }
}

<style>
    .menuTarget {
        width: 100px;
        background: yellow;
        margin: 50px;
    }
</style>