Hello Ricardo,

CloseOnClick="true" is not meant to be used together with ShowOn="@MenuShowEvent.Click", because the two settings contradict each other and the root Menu items won't expand.

Please remove CloseOnClick="true" and use the JS workaround from my earlier post.

On the other hand, I agree that the current built-in behavior leads to UX issues and I will escalate this to the product owners.

Regards,
Dimo
Progress Telerik

Hello Scott,

Actually, I hit this problem while working on another scenario. The provided workaround was not triggered by your disappointment, which I agree is justified, because the issue in question affects the UX of all touch device users.

Most businesses need to tackle this standard real-life situation:

• Unlimited number of tasks or opportunities
• Limited resources

So a system that measures the demand for a given task (no matter if it's a bug or a feature) helps us prioritize our backlog. I agree that each bug deserves to be fixed as soon as possible, but the ultimate time frame can vary quite a bit.

Quoting from another thread of yours...

>> Bugs put EVERYTHING on hold and get resolved immediately...THEN you move back to adding features.

... I am personally not aware of a software vendor who follows such a policy. If you are able to achieve this in your company and it works for both you and your customers, then you have my sincere admiration.

Finally, I can mention that recently we made adjustments to our bug prioritization process, so that it's more simple and fair. This will ensure that more important bugs will be fixed first, however, it will still rely on things like severity and number of affected customers.

Regards,
Dimo
Progress Telerik

Hello Scott and all,

We plan to work on this soon, so everyone who is following the item will receive status update notifications.

In the meantime, here is a JS workaround to close the Menu after a leaf item with no children is tapped or clicked. Flat Menu data needs a different conditional statement in the OnClick handler, but the idea is the same.

@inject IJSRuntime js

<TelerikMenu Data="@MenuItems"
             ShowOn="@MenuShowEvent.Click"
             HideOn="@MenuHideEvent.Click"
             OnClick="@( (MenuItem item) => OnMenuClick(item) )" />

@* Move JavaScript code to a separate JS file in production *@
<script suppress-error="BL9992">
    function closeMenu() {
        var pointerEvent = new PointerEvent("pointerdown");
        document.documentElement.dispatchEvent(pointerEvent);
    }
</script>

@code {
    private List<MenuItem> MenuItems { get; set; } = new List<MenuItem>();

    private async Task OnMenuClick(MenuItem clickedItem)
    {
        if (clickedItem.Items == null || !clickedItem.Items.Any())
        {
            await js.InvokeVoidAsync("closeMenu");
        }
    }

    protected override void OnInitialized()
    {
        MenuItems = new List<MenuItem>() {
            new MenuItem()
            {
                Text = "Item 1",
                Items = new List<MenuItem>() {
                    new MenuItem()
                    {
                        Text = "Item 1.1",
                    },
                    new MenuItem()
                    {
                        Text = "Item 1.2",
                        Items = new List<MenuItem>() {
                            new MenuItem()
                            {
                                Text = "Item 1.2.1",
                            },
                            new MenuItem()
                            {
                                Text = "Item 1.2.2",
                            }
                        }
                    },
                    new MenuItem()
                    {
                        Text ="Item 1.3",
                        Items = new List<MenuItem>() {
                            new MenuItem()
                            {
                                Text = "Item 1.3.1",
                            },
                            new MenuItem()
                            {
                                Text = "Item 1.3.2",
                            }
                        }
                    }
                }
            },
            new MenuItem()
            {
                Text = "Item 2",
                Items = new List<MenuItem>() {
                    new MenuItem()
                    {
                        Text = "Item 2.1",
                    },
                    new MenuItem()
                    {
                        Text = "Item 2.2",
                    }
                }
            }
        };

        base.OnInitialized();
    }

    public class MenuItem
    {
        public string Text { get; set; }
        public List<MenuItem> Items { get; set; }
    }
}

Regards,
Dimo
Progress Telerik

Hi Víctor,

I apologize for the inconvenience you are experiencing due to this problem.

Regrettably, at this stage, there is no workaround for it.

In the case of a feature/bug with no workaround and no fixed date for its resolution, we do our best to provide a workaround which we will include in the public report once it is available.

Thank you for your understanding and patience during this process.

Regards,
Hristian Stefanov
Progress Telerik

Hi Parya,

We also consider this functionality useful, so we've marked it with "Unplanned" status - it indicates that this is a valid feature not scheduled for implementing yet. I tweaked the title a bit to indicate it targets mobile usage and also added some details to the original post.

I added your vote to increase the feature's popularity as we prioritize the feature requests implementation based on the community interest and demand. As a creator, you are automatically subscribed and will receive email notifications when its status changes. This is the best way to keep in track with the progress of the feature as once we know which release will contain its implementation, we will update its status in the feedback portal and you will be notified via email accordingly.

Regards,
Nadezhda Tacheva
Progress Telerik