themesberg / themesberg/flowbite

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

Open
#986 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
HTML
Stars
9.4k
Forks
862
PR merge metrics
No merged PRs in 30d

Description

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?

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the WASM integration guidance and the reported OnAfterRenderAsync call to window.initializeFlowbite, then compare its behavior with the enhancedload and window.onload attempts. Reproduce navigation and refresh with the datepicker, and consider the issue done when it remains functional after both without reinitializing on every render.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, wasm
Domain
frontend, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.