Very bad performance of DropDown component

[guratr]

I noticed on my project that scrolls on comment page are very laggy, and found the DropDown component to be the problem. I tried striping everything else that may be causing this, but even for the most minimal setup the issue persist.

To Reproduce I just print plane html with php like this, with 100 components on page. dropDown.txt

<div>
    @for($i=0;$i<100;$i++)
        <div class="h-10">
            <button id="dropdownComment{{$i}}Button" data-dropdown-toggle="dropdownComment{{$i}}" type="button"></button>
            <div id="dropdownComment{{$i}}" class="hidden"></div>
        </div>
    @endfor
</div>

<link href="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.8.1/flowbite.min.css"  rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/1.8.1/flowbite.min.js"></script>

Screenshots

As you can see out of 1.63 s of scrolling, 991 ms spent on scripting.

Desktop

• OS: MacOs
• Browser Chrome

[LukeGarrigan]

Got the same issue, running a website with multiple components that have their own modals. The user can add as many rows as they wish, any more than 10 and the website is nearly unusable.

[malikvogt]

Got the same issue, running a website with multiple components that have their own modals. The user can add as many rows as they wish, any more than 10 and the website is nearly unusable.

I noticed the same problem with ininite scroll and dynamic loaded content. I have an overload of eventlisteners from poppenjs, that is used by flowbite for dropdowns etc.. In my oppinion these performance issues should get a higher prio, because it makes my application nearly unusable.

[PhilETaylor]

i have over 2000+ small tooltips, a few modals, a few dropdowns (which is not unrealistic in a normal SaaS UI) and after page load there is a 1-2second and also a scrolling lag/refresh issue. :-(

Its got to the point now where i'm ripping out import('flowbite') and having to write my own JS :(