Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
NathanVG opened this issue Oct 22, 2024 · 1 comment
Open

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

NathanVG opened this issue Oct 22, 2024 · 1 comment

Comments

@NathanVG
Copy link

NathanVG commented Oct 22, 2024

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
Copy link
Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant