KTUI Menu and Dropdown Stop Working in Blazor Server
Hello Metronic Support Team,
I am using the Metronic Tailwind version with KTUI in a Blazor Server project. I have encountered an issue where:
Sidebar menu toggles and dropdown menus work on the first click but stop responding afterwards.
This occurs even without navigating to a new page.
I suspect it is related to KTUI’s event listeners being detached when Blazor re-renders the DOM.
I have tried re-initializing KTMenu.init() and KTDropdown.init() using JavaScript after the first click and using a MutationObserver, but the issue persists.
Could you provide guidance or a recommended approach to make KTUI components fully compatible with Blazor Server’s lifecycle? Specifically, I need all menus, dropdowns, and toggles to remain functional after any Blazor re-render.
Thank you for your assistance.
Best regards,
Replies (3)
When configuring Blazor routes in interactive server rendering mode,
it seems to me that not all initialization JS files are loaded.
This causes abnormal behavior in some components, which does not occur in non-interactive mode. For this reason, I had to modify the loading of JS files as follows.
MainLayout.razor
protected override void OnAfterRender(bool firstRender)
{
JS.InvokeVoidAsync("KTComponent.init");
JS.InvokeVoidAsync("KTLayout.init");
if (firstRender)
{
// Following lines allow sidebar toggle and user menu dropdowns to work when <Routes @rendermode="InteractiveServer" />
JS.InvokeVoidAsync("KTDropdown.init");
JS.InvokeVoidAsync("KTToggle.init");
}
}
}
Can someone tell me if there are any problems with my implementation?
Hi,
We have double-checked this issue in the latest version, and the menus and dropdowns are working as expected.
Could you please provide specific steps to reproduce the problem?
Regards,
Lauris Stepanovs,
Keenthemes Support Team
I came across this post because I also had the same problem; I realized that by adding the InteractiveServer rendermode property to routes like this
<Routes @rendermode=InteractiveServer />
I am no longer able to shrink the sidebar and to make the UserMenu drop down. For me, it is important to set that attribute because:
1. I don't have to repeat it in every component
2. I can't include it in the layout because it would crash
3. in the template of a new Blazor Server .NET 10 project, _Host.cshtml doesn't even exist anymore and I would like not to restore it
You will almost certainly need more details to help us, feel free to ask me. If necessary, I could publish the working version and the non-working version in order to create a test case.
