Scrollable Menu behaves strange for multiple child levels

[Petter]

Pasting this code on a Razor page should help illustrate the problem:

<div id="strangeStore">
    @(Html.Kendo().Menu()
        .Name("Menu")
        .Animation(animation => animation.Enable(false))
        .Scrollable(true)
        .OpenOnClick(click => click.RootMenuItems(true).SubMenuItems(true))
        .Items(items =>
        {
            items.Add()
                .Text("Products")
                .Items(children =>
                {
                    children.Add().Text("Furniture")
                        .Items(innerChildren =>
                        {
                            innerChildren.Add().Text("Tables")
                                .Items(iic =>
                                {
                                    iic.Add().Text("Red");
                                    iic.Add().Text("Green");
                                    iic.Add().Text("Blue");
                                });
                            innerChildren.Add().Text("Chairs")
                                .Items(iic =>
                                {
                                    iic.Add().Text("42");
                                    iic.Add().Text("1337");
                                });
                            innerChildren.Add().Text("Sofas")
                                .Items(iic =>
                                {
                                    iic.Add().Text("Soft");
                                    iic.Add().Text("Hard");
                                });
                            innerChildren.Add().Text("Beds")
                                .Items(iic =>
                                {
                                    iic.Add().Text("deadbeef");
                                    iic.Add().Text("cafebabe");
                                });
                        });
                    children.Add().Text("Decor")
                        .Items(innerChildren =>
                        {
                            innerChildren.Add().Text("Curtains");
                            innerChildren.Add().Text("Blinds");
                            innerChildren.Add().Text("Rugs");
                            innerChildren.Add().Text("Carpets");
                        });
                });
            items.Add().Text("Events");
        })
    )
</div>

 

To see the problem, click in sequence: Products, Furniture, Tables, Decor

Expected result: Products and its Decor child menu is open

Actual result: the Tables child menu is also open

Changing to ".Scrollable(false)" seems to fix the problem, but makes it hard to use a multi-level menu with many items on small screens😅

Any other suggestions on how to fix this?

[Petter]

Even more strange behaviour that can be demonstrated with the same code:

• Keep ".Scrollable(true)"
• Comment out the line with ".OpenOnClick(....)"
• Build and run
• Try to open menus with children of Tables and Chairs

Inner inner children menus seems to open up at strange positions. Disabling scrolling seems to fix the problem. Please advise how we can enable scrolling with multiple levels of children (example: inner inner inner inner children).

[Mihaela]

Hello Petter,

Thank you for your report.

Both issues are known bugs and they have been logged in our Feedback Portal:

• Submenu item remains opened when openOnClick.rootMenuItems and scrollable are set to true in Menu

I have raised up the item's priority based on your report.

•  Menu popup container closes on hover when scrollable is enabled

It is a regression bug introduced in version 2023.2.606 and the fix will be available within the R1 2024 SP2 release.

If any further questions arise, please let me know.

 

Regards,
Mihaela
Progress Telerik

[Petter]

Thanks for help and detailed information.

I downgraded Telerik to 2023.1.117 and got menu scroll fixed, but that results in issues getting it to fit with Bootstrap 5.3. Unsure at the moment if we will end up using menu from some other library or try to make the older Telerik version look ok with new Bootstrap. When is expected release date for R1 2024 SP2?

[Mihaela]

Yesterday we released an internal build (version 2023.3.1129), where the Menu regression ("Menu popup container closes on hover when scrollable is enabled") is fixed.

You can access the internal build from the UI for ASP.NET Core download page:

[Petter]

Thanks for great support! This works well for us. A tiny issue still exists on small screens when scrolling to bottom of the screen and opening a sub-menu there with only one item inside; then its not possible to select to inner item (item covered by scrollbar).

[Mihaela]

Thank you for your feedback, Petter! It is greatly appreciated!

To get a better grasp of the behavior you are experiencing on smaller screens, could you please consider sharing a minimal sample and a screenshot that demonstrates it?