Interactivity not working

[khaljimbo]

Using this getting started repo, or following the instructions here: https://flowbite.com/docs/getting-started/blazor/ the interactivity of the components are not working.

The CSS and UI components display fine, but nothing happens when clicking on the drop downs. There are no errors or warning appearing in dev tools.

I have tried using CDN version 1.8.0 and 1.8.1 and both Blazor Server and WASM and it is still the same, there is no interactivity on the components.

[omarqui]

Yes, I have the same problem!.

[Sinistancer]

Is someone planning to fix this issue? I really like this FlowBite and want to try Blazor.

[fdonnet]

Same here, not working with Blazor 8.0 (the interactive part)

[miladsoft]

To create dropdowns in Blazor, you can use the built-in InputSelect component or create custom dropdown components. I'll demonstrate both approaches:

Using InputSelect:

1. In your Blazor component, use the InputSelect component for a basic dropdown:

<!-- YourBlazorComponent.razor -->
<label for="fruit">Select a fruit:</label>
<InputSelect id="fruit" @bind-Value="selectedFruit">
    <option value="apple">Apple</option>
    <option value="orange">Orange</option>
    <option value="banana">Banana</option>
</InputSelect>

<p>You selected: @selectedFruit</p>

@code {
    private string selectedFruit;
}

In this example, selectedFruit is bound to the selected value in the dropdown.

Creating a Custom Dropdown:

1. Create a new component for your custom dropdown. For example, CustomDropdown.razor:

<!-- CustomDropdown.razor -->
<div class="custom-dropdown">
    <button @onclick="ToggleDropdown">Select a fruit</button>
    @if (showDropdown)
    {
        <ul>
            <li @onclick="() => SelectFruit('apple')">Apple</li>
            <li @onclick="() => SelectFruit('orange')">Orange</li>
            <li @onclick="() => SelectFruit('banana')">Banana</li>
        </ul>
    }
</div>

@code {
    private bool showDropdown = false;
    private string selectedFruit;

    private void ToggleDropdown()
    {
        showDropdown = !showDropdown;
    }

    private void SelectFruit(string fruit)
    {
        selectedFruit = fruit;
        showDropdown = false;
    }
}

2. Use this custom dropdown component in your main Blazor component:

<!-- YourBlazorComponent.razor -->
<CustomDropdown />
<p>You selected: @selectedFruit</p>

@code {
    private string selectedFruit;
}

This custom dropdown uses a button to toggle the visibility of a list of options. When an option is clicked, it updates the selectedFruit property and hides the dropdown.

Choose the approach that best fits your needs—whether it's using the built-in InputSelect or creating a custom dropdown component. Custom dropdowns offer more flexibility and customization options, but the built-in InputSelect is simpler for basic scenarios.

[miladsoft]

To show a modal in a Blazor application, you can use a combination of Razor components, CSS for styling, and JavaScript for handling the modal's visibility. Here's a basic example of how you can create a modal in Blazor:

1. Create a Modal Component:
   Create a new Blazor component for your modal. For example, Modal.razor:

   <!-- Modal.razor -->
   <div class="modal" style="display: @(showModal ? "block" : "none")">
       <div class="modal-content">
           <span class="close" @onclick="CloseModal">&times;</span>
           <p>Your modal content goes here.</p>
       </div>
   </div>
   
   @code {
       private bool showModal = false;
   
       private void OpenModal()
       {
           showModal = true;
       }
   
       private void CloseModal()
       {
           showModal = false;
       }

2. Add Styles for the Modal:
   Add styles for your modal in your CSS file (e.g., styles.css):

   /* styles.css */
   .modal {
       display: none;
       position: fixed;
       z-index: 1;
       left: 0;
       top: 0;
       width: 100%;
       height: 100%;
       overflow: auto;
       background-color: rgba(0,0,0,0.4);
   }
   
   .modal-content {
       background-color: #fefefe;
       margin: 15% auto;
       padding: 20px;
       border: 1px solid #888;
       width: 80%;
   }
   
   .close {
       color: #aaa;
       float: right;
       font-size: 28px;
       font-weight: bold;
   }
   
   .close:hover,
   .close:focus {
       color: black;
       text-decoration: none;
       cursor: pointer;
   }

3. Use the Modal in Your Main Component:
   Include your modal component in your main component (e.g., Index.razor):

   <!-- Index.razor -->
   <h1>Hello Blazor!</h1>
   
   <button @onclick="OpenModal">Open Modal</button>
   
   <Modal />
   
   @code {
       private void OpenModal()
       {
           // Call the OpenModal method in the Modal component
           // to show the modal when the button is clicked.
           // This is just an example; you can trigger modal opening
           // based on your specific requirements.
           var modal = new Modal();
           modal.OpenModal();
       }

4. Reference the CSS in Your Main Component:
   Make sure to include the CSS file in your main component to apply the styles:

   <!-- Index.razor -->
   @* ... *@
   <style>
       @import "./styles.css";
   </style>

This example uses a combination of Blazor code and CSS to create a simple modal. Adjust the styles and content based on your specific requirements. You can also explore existing Blazor modal libraries or create more complex modal components based on your needs.

[miladsoft]

For more information 🥇

Tailwind CSS doesn't typically come with a JavaScript file (Tailwind itself is primarily a CSS framework), so you don't usually need to explicitly load a Tailwind JavaScript file in your Blazor application. However, if you are using certain plugins or features that require JavaScript (e.g., for dropdowns, modals, etc.), you might need to include the necessary JavaScript files.

Here are general steps to include JavaScript in a Blazor application:

1. Include JavaScript Files:
   If you need to include external JavaScript files, you can do so in your HTML file (index.html for Blazor WebAssembly or _Host.cshtml for Blazor Server). Add script tags to include the necessary JavaScript files. For example:

   <!-- wwwroot/index.html or wwwroot/_Host.cshtml -->
   <script src="path/to/your/javascript-file.js"></script>

2. Use JavaScript Interop (Blazor WebAssembly):
   If you are working with Blazor WebAssembly and you need to interact with JavaScript from your C# code, you can use JavaScript Interop. This involves creating a JavaScript file with the necessary functions and then calling those functions from your Blazor components.

   Create a JavaScript file (e.g., interop.js):

   // wwwroot/js/interop.js
   window.myInterop = {
       myFunction: function () {
           // Your JavaScript logic here
       }
   };

   In your Blazor component, use JavaScript Interop to call the JavaScript function:

   @inject IJSRuntime JSRuntime
   
   <button @onclick="CallJavaScriptFunction">Call JavaScript Function</button>
   
   @code {
       private async Task CallJavaScriptFunction()
       {
           await JSRuntime.InvokeVoidAsync("myInterop.myFunction");
       }
   }

3. JavaScript in Blazor Server:
   If you are working with Blazor Server, you can use JavaScript directly in your Razor components. Place your JavaScript code inside a <script> tag within your Razor component.

   <!-- YourBlazorComponent.razor -->
   <script>
       // Your JavaScript logic here
   </script>

Make sure to adjust the paths and file names according to your project structure.

Remember that Tailwind CSS itself does not require JavaScript, but certain plugins or features may. Always refer to the documentation of the specific Tailwind-related libraries or plugins you are using for guidance on including any necessary JavaScript files in your Blazor project.

[miladsoft]

[sonborj]

I can only make the flowbite + tailwind + blazor work in static Server Side Rendering mode, once I put an Interactive mode in the component, flowbite won't work, no errors displaying in the console though.

Also, when I have a previous page/component which has an interactive mode, then the next page has No Interactive mode, Flowbite won't work in the onset, I have to refresh the page. It seems that the flowbite js is not active on Interactive mode and then the browser maintains it that way on the next page.

[duynguyen224]

https://flowbite.com/docs/getting-started/blazor/#wasm-integration
Seem like you are missing the last step to initializing the Flowbite.
Check it out on the docs
Or see the code below.
Step 1. @inject IJSRuntime Js
Step 2.
protected override async Task OnAfterRenderAsync(bool isFirstRender) {
if (isFirstRender){
await Js.InvokeVoidAsync("initFlowbite");
}
}

[kjbtech]

In my case, I needed to get rid of the first render condition.
Meaning, I have now :

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

That said, I do not really understand potentials consequences!