Small issue with nested dropDown() menu entries

[tfonrouge]

Hi,

I have a small issue using nested kvision's dropDown().

Using the following sample code:

        root("kvapp") {
            navbar(collapseOnClick = true) {
                dropDown(text = "Option 1", forNavbar = true) {
                    dropDown(text = "1st Sub menu", forDropDown = true, autoClose = AutoClose.OUTSIDE) {
                        ddLink("Menu item")
                        ddLink("Menu item")
                        dropDown(text = "2nd Dropdown", forDropDown = true) {
                            ddLink("Menu item")
                            ddLink("Menu item")
                            ddLink("Menu item")
                        }
                    }
                    separator()
                    dropDown(text = "2nd Sub menu", forDropDown = true, autoClose = AutoClose.OUTSIDE) {
                        onEventLaunch("show.bs.dropdown") {
                            console.warn("change 2")
                        }
                        ddLink("Sub menu 2.1")
                        ddLink("Sub menu 2.2")
                        ddLink("Sub menu 2.3")
                    }
                }
            }
        }

If I click the 1st sub menu entry I get:

and when I click the second sub menu entry I get:

So, it seems that the first sub menu entry is not closed when the second sub menu entry is selected, seems that the event action is not propagated when the second menu is clicked and the 1st menu entry doesn't close.

Any help or insight will be greatly appreciated !

Thanks in advance,

Teo

[rjaros]

Hello. This is not something easy to fix. In general KVision doesn't manage dropdowns. They are managed by Bootstrap. And Bootstrap doesn't support nested dropdowns since version 4 (see: twbs/bootstrap#16387). Currently nested menus work by blocking click event propagation for all dropdowns inside other dropdowns (otherwise clicking any submenu would close all opened menus). That's why the first submenu is not closed when the second is opened.

I don't think there is a general way to fix this in KVision. But as a workaround you can manually manage events and visibility like this:

        root("kvapp") {
            navbar(collapseOnClick = true) {
                dropDown(text = "Option 1", forNavbar = true, autoClose = AutoClose.OUTSIDE) {
                    lateinit var dd2: DropDown
                    val dd1 = dropDown(text = "1st Sub menu", forDropDown = true, autoClose = AutoClose.OUTSIDE) {
                        onEventLaunch("show.bs.dropdown") {
                            if (dd2.button.getElement()?.classList?.contains("show") == true) {
                                dd2.toggle()
                            }
                        }
                        ddLink("Menu item")
                        ddLink("Menu item")
                        dropDown(text = "2nd Dropdown", forDropDown = true) {
                            ddLink("Menu item")
                            ddLink("Menu item")
                            ddLink("Menu item")
                        }
                    }
                    separator()
                    dd2 = dropDown(text = "2nd Sub menu", forDropDown = true, autoClose = AutoClose.OUTSIDE) {
                        onEventLaunch("show.bs.dropdown") {
                            if (dd1.button.getElement()?.classList?.contains("show") == true) {
                                dd1.toggle()
                            }
                        }
                        ddLink("Sub menu 2.1")
                        ddLink("Sub menu 2.2")
                        ddLink("Sub menu 2.3")
                    }
                }
            }
        }

[tfonrouge]

Hi,

I've managed to fix the closing the dropdowns with the following KVision code which uses direct set of classes and attributes:

        root("kvapp") {
            navbar(collapseOnClick = true) {
                dropDown(text = "Option 2", forNavbar = true, autoClose = AutoClose.OUTSIDE) {
                    div(className = "dropend") {
                        tag(TAG.A, content = "Sub menu 1", className = "dropdown-item dropdown-toggle") {
                            setAttribute("data-bs-toggle", "dropdown")
                            setAttribute("data-bs-auto-close", "outside")
                        }
                        ul(className = "dropdown-menu dropdown-menu-end") {
                            li(content = "Menu item", className = "dropdown-item")
                            li(content = "Menu item", className = "dropdown-item")
                            li(content = "Menu item", className = "dropdown-item")
                            div(className = "dropend") {
                                tag(TAG.A, content = "Sub menu 1", className = "dropdown-item dropdown-toggle") {
                                    setAttribute("data-bs-toggle", "dropdown")
                                    setAttribute("data-bs-auto-close", "outside")
                                }
                                ul(className = "dropdown-menu dropdown-menu-end") {
                                    li(content = "Menu item", className = "dropdown-item") {
                                        onClick {
                                            console.warn("click 1")
                                            this@dropDown.toggle()
                                        }
                                    }
                                    li(content = "Menu item", className = "dropdown-item")
                                    li(content = "Menu item", className = "dropdown-item")
                                }
                            }
                        }
                    }
                    div(className = "dropend") {
                        tag(TAG.A, content = "Sub menu 2", className = "dropdown-item dropdown-toggle") {
                            setAttribute("data-bs-toggle", "dropdown")
                            setAttribute("data-bs-auto-close", "outside")
                        }
                        ul(className = "dropdown-menu dropdown-menu-end") {
                            li(content = "Menu item 2", className = "dropdown-item")
                            li(content = "Menu item 2", className = "dropdown-item")
                            li(content = "Menu item 2", className = "dropdown-item")
                        }
                    }
                }
            }
        }

The above code works well on closing other opened dropdowns when clicking a new one, however this doesn't work well on mobiles devices (that's one of the reasons for bootstrap deprecated this feature), but I think that I'll use this approach by also creating some custom controls.

I'll keep investigating this, thank you.

best regards,

Teo