themesberg / themesberg/flowbite

Does initFlowbite perform asynchronous work on attributes?

Open
#813 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
HTML
Stars
9.4k
Forks
862
PR merge metrics
No merged PRs in 30d

Description

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.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by tracing initFlowbite() from the HTMX onLoad callback and inspect when the data-popper-placement attribute is added. Compare the callback-time DOM with the later console state, then determine whether initFlowbite should close open elements or expose a stable attribute-based way to find them; done means the behavior is defined and reproducible.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, kotlin, tailwindcss
Domain
frontend, web-dev
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.