Blazor WASM - Flowbite js does not get loaded on nav or refresh

[NathanVG]

Describe the bug I am implementing some Flowbite components into our project, and am currently running into an annoying bug. We are building a Component Library with a Razor Class Library project that gets packaged into a nuget package to be consumed in our various frontend projects. One of the components is a Flowbite datepicker.

After following the steps described in the getting started for WASM.

@inject IJSRuntime Js

// other imports


<!--Template html-->

@code {

  /// auth code

  protected override async Task OnAfterRenderAsync(bool isFirstRender)
  {
    if (isFirstRender)
    {
      await Js.InvokeVoidAsync("window.initializeFlowbite");
    }
  }
}

Everything works perfectly on first load, but once the page is refreshed or the user navigates to another url, flowbite stops working and we no longer get to see the datepicker. Presumably because the layout file rerenders and as such the following code does not fire as it is not the first render. Also note that we check if the user is logged in here and if not redirect, maybe this has something to do with it?

if we drop the firstRender check this is solved and the datepicker now renders after refresh, However this breaks some other stuff as now flowbite get reinitialized on every render, such as when I click a date the dialog does not close and does not highlight the newly picked date.

I have also already tried some other solutions I saw in issues:

<script>
      window.initializeFlowbite = () => {
        initFlowbite();
      };
      Blazor.addEventListener('enhancedload', function () {
        initFlowbite();
      });
      window.onload = function () {
        initFlowbite();
      };
    </script>

Any help?

[NathanVG]

I would like to mention here that we found a workaround by having the following function in our component itself instead of in the MainLayout file. This seems to fix the issues we were experiencing.

protected override async Task OnAfterRenderAsync(bool isFirstRender)
  {
    if (isFirstRender)
    {
      await Js.InvokeVoidAsync("window.initializeFlowbite");
    }
  }

However I will leave this issue as open as I think this is something that should be evaluated and maybe adjusted in the docs.