Dropdown menu does not works when HTMX Boost is enabled

[sdil]

Describe the bug

I created a HTML website in Django and I enabled HTMX boost when navigating links in the web page. When I navigate to another page, my dropdown menu no longer works.

To Reproduce Steps to reproduce the behavior:

1. Install HTMX in the web page
2. Enable hx-boost in the div
3. Add flowbite dropdown component
4. Click on any link, then the dropdown menu no longer works

Expected behavior

Dropdown menu should works when navigating to another page

Screenshots

https://github.com/themesberg/flowbite/assets/461537/83007504-5002-4fcd-96d4-603f975f15b7

Desktop (please complete the following information):

• OS: MacOS
• Browser Chrome v114
• Flowbite Version 1.7.0

Additional context I really wish Flowbite works well with HTMX.

[merof-code]

you have to reinitialize flowbite for that, there is a hack for angular, but the general idea will most likely work for you https://github.com/themesberg/flowbite/issues/579#issuecomment-1642365004

I created an Angular decorator to fix this (I think this problem is only for Angular). Make sure that you use it in every component that you want to use the HTML markup, even if it is a dynamic component created by a HTTP request.

Like this:

@Component({
  selector: 'mycomponent',
  templateUrl: './mycomponent.component.html',
  styleUrls: ['./mycomponent.component.scss']
})
@Flowbite()
export class MyComponent

https://gist.github.com/OmarMtya/9ce68c563893d1c774f11a94ea73a31c

[tsepelev]

Hello. Add the following code to your main template:

    htmx.onLoad(function () {
        initFlowbite();
    });

This should work. https://github.com/themesberg/flowbite/issues/524#issuecomment-1572893000