themesberg / flowbite

Open-source UI component library and front-end development framework based on Tailwind CSS
https://flowbite.com
MIT License
7.3k stars 710 forks source link

Does initFlowbite perform asynchronous work on attributes? #813

Open reubenfirmin opened 4 months ago

reubenfirmin commented 4 months ago

Is your feature request related to a problem? Please describe. The issue I'm trying to solve: when I click on a popper menu to load the settings page, the popper menu stays open. The settings page is loaded with htmx, which of course is regenerating the content of part of the page (but not the navbar containing the popper menu).

To address this, I added on a function in HTMX.onLoad (this is kotlinjs, but it maps pretty cleanly to js):

        window.asDynamic().htmx.onLoad {
            initFlowbite()
            initCharts()
            FlowbiteHelpers.clearOpenElements() // this one
        }

clearOpenElements attempts to do this:

        val elements = document.querySelectorAll("[data-popper-placement]")
        for (i in 0 until elements.length) {
            val el = elements.item(i)!! 
            (el as HTMLElement).style.display = "none"
        }

This didn't work. Adding introspection of the dom via console logging in this function, I can see that the "data-popper-placement" attribute is in fact missing from the div when the function runs. However, I can run console logging from the console and see the attribute. This makes me think that there might be something asynchronous happening after initFlowbite() runs - is that the case?

And - general request - I think initFlowbite should clear any open elements like this. Maybe there's a reason not to, but in that case please make a stable way for us to find elements by attribute.