themesberg / themesberg/flowbite
Blazor WASM - Flowbite js does not get loaded on nav or refresh
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
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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