Blazor SSR Flowbite not initializing after navigation

[vukasinpetrovic]

Describe the bug I just setup Blazor Server app with Flowbite and added dropdown, basically everything as it's in the documentation. It displays it and dropdown opens. Problem occurs when I navigate to another page, and come back to homepage where dropdown is. Now it is not working. I realized it's happening because Blazor changes only part of the HTML (even in SSR) and Flowbite JS is not called again to initialize component. After manually hard refreshing the page, it loads again. This is not dropdown related, but any component that requires JS Flowbite to interact.

How can we solve this?

It's also mentioned here: https://github.com/themesberg/tailwind-blazor-starter/issues/8

[sardar97]

I have same issue! did you figure it out? @vukasinpetrovic

[paulpitchford]

Yeah, I'm getting this too, exact same issue and component as @vukasinpetrovic. Any pointers?

[sardar97]

Yeah, I'm getting this too, exact same issue and component as @vukasinpetrovic. Any pointers?

I fixed it by adding this codes to my App.razor <script> Blazor.addEventListener('enhancedload', () => { // https://flowbite.com/docs/getting-started/javascript/ initFlowbite(); }); </script>

[vukasinpetrovic]

@paulpitchford Sorry for the delayed answer. I solved it the same way as @sardar97 using that event listener. It is called whenever some navigation happens while using enhanced navigation, so we call initFlowbite() function again, which in turn reinitializes all found components in view.

<script src="_framework/blazor.web.js"></script>
<script>
  Blazor.addEventListener('enhancedload', function () {
    initFlowbite();
  });
</script>