Issue with Icon and DateTime Picker functionality after Implementing Bootstrap Theme

[sambhavyadav90]

In my Blazor Server Application, I've implemented a Bootstrap theme. However, there seems to be an issue with the functionality of the Icon and DateTime Picker on the website

After 1-2 seconds of loading the page, the Icon and DateTime Picker functionality stops working. This behavior is consistent and needs investigation to identify the root cause.

Bootstrap Theme Template URL : Template

Steps to reproduce:

1. Navigate to hosted application
2. Observe the behavior of the Icon and DateTime Picker functionality.
3. Notice that after 1-2 seconds, the functionality stops working.

Expected behavior:
The Icon and DateTime Picker functionality should remain operational without interruption after loading the page.

Additional information:

1. Blazor application with Bootstrap theme implemented.
2. Issue persists across different browsers.
3. No error messages are displayed in the console.

Please investigate this issue further to understand what's causing the problem and provide a resolution. Thank you for your attention to this matter.

[halter73]

Is it possible that JS events were attached to the prerendered DOM that gets replaced later by interactive rendering which removes those events? If not, we will need a minimal repro of the issue hosted on GitHub to investigate this further.

[sambhavyadav90]

I've prepared a minimal repository project to assist in debugging the issue we discussed. You can find the project via the following link:
Repo Project

After 1-2 Seconds

[javiercn]

@sambhavyadav90 thanks for the additional details.

What's happening is that the approach you are using for scripts is problematic when using interactivity. If you have interactive components you shouldn't use script tags inside them. Those tags will apply when the component gets prerendered, but won't apply when the component becomes interactive.

The best practice recommendations for scripts is to define a JS module that you can inject into the page or retrieve via import and invoke a function within OnAfterRender to attach any JS that is needed for the component to work.

For example:

module.js

export activate = function () {
...
};

activate();

App.razor

<script type=module src="module.js"></script>

Component.razor

@code {
protected async Task override OnAfterRenderAsync()
{
   _module ??= await import('module.js');
  await _module.InvokeAsync("activate");
}

(note that this is pseudo-code).

[sambhavyadav90]

Then tell me how to call function on .razor page from flatpickr.min.js for your reference just check this flatpickr.min.js

// Deleted the content of the JS file linked above to make it easier to read (by @mkArtakMSFT)

[mkArtakMSFT]

Thanks for contacting us. This doesn't seem to be a problem with the framework rather a question about how to use it.
We're converting this into a discussion so that our community members can step in and help you with solving it.

[halter73]

Then tell me how to call function on .razor page from flatpickr.min.js

This might help. https://learn.microsoft.com/en-us/aspnet/core/blazor/javascript-interoperability/call-dotnet-from-javascript

[sambhavyadav90]

@javiercn @halter73 Recently, there has been a growing trend among some Microsoft Technology Developers to consider migrating from Blazor to React or Angular due to perceived challenges with JavaScript integration in Blazor applications

React and Angular have vibrant communities and extensive ecosystems, but so does Blazor. By migrating away from Blazor, developers may miss out on the growing community support, documentation, and ecosystem development that could address existing challenges over time.

I'm reaching out to express my frustration with the current lack of real-time examples demonstrating the seamless integration of Bootstrap themes in Blazor applications. As a developer working with Blazor, I have found myself struggling to incorporate Bootstrap themes effectively, and I believe that having real-time examples would greatly alleviate this challenge.

I believe that using my repository could provide a more efficient and effective way to address the problem at hand. By leveraging the resources and codebase available in my repository, we can streamline the troubleshooting process and expedite the resolution of the issue.