search

themesberg / tailwind-blazor-starter

Open-source project to get you started with Tailwind CSS, Blazor, and the Flowbite UI components
https://flowbite.com/docs/getting-started/blazor/
MIT License
22 stars 9 forks source link

Components in .NET 8 Blazor SSR not working after navigation #8

Closed mdmontesinos closed 5 months ago

mdmontesinos commented 6 months ago

Current project setup does not properly work with .NET 8 Blazor SSR enhanced navigation.

Components that require js such as Carousel only work on first load. After enhanced navigating to another page and returning back to the previous one, the carousel disappears and requires a full reload to show again.

I have also tested the popover and same behaviour happens. The popover only shows on first load or after a full reload.

vukasinpetrovic commented 5 months ago

@mdmontesinos Did you maybe find a solution for this? I also just stumbled upon this problem as I setup the same project type, and I'm scratching my head on how to solve it.

mdmontesinos commented 5 months ago

If you're using Blazor with Static SSR (Interactive None) and Enhanced Navigation (which is active by default), you must use the "enhancedload" event provided and re-initialize flowbite every time an enhanced navigation occurs.

You should have something like this in App.razor, in the body:

<script src="_framework/blazor.web.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/flowbite/2.2.1/flowbite.min.js"></script>
<script>
    Blazor.addEventListener('enhancedload', () => {
        // https://flowbite.com/docs/getting-started/javascript/
        initFlowbite();
    });
</script>

You could also initialize only the specific components of Flowbite you're going to use (to reduce overhead) as is stated in the docs.

Nonetheless, the blazor template in this repo is outdated and also is the documentation on how to install it.

vukasinpetrovic commented 5 months ago

@mdmontesinos Thank you a lot!