NavMenu Exception

[SantosVictorero]

🐛 Bug Report

Exception from NavMenu

💻 Repro or Code Sample

<div class="navmenu">
    <div style="background: var(--neutral-layer-3); display: flex; padding: 5px;">
        <input id="navmenu-toggle" 
               type="checkbox" 
               title="Menu expand/collapse toggle" 
               class="navmenu-icon" />
        <label for="navmenu-toggle" 
               class="navmenu-icon">
               <FluentIcon Value="@(new Icons.Regular.Size20.Navigation())" 
                           Color="Color.Fill" />
        </label>
        <nav class="sitenav" 
             aria-labelledby="main-menu" 
             onclick="document.getElementById('navmenu-toggle').click();">
            <FluentNavMenu Id="main-menu" 
                           Width="200"
                           Collapsible="true"
                           Title="Dashboard Menu"
                           @bind-Expanded="@_Expanded" 
                           CustomToggle="true">
                <FluentNavLink Href="/" Match="NavLinkMatch.All" Icon="@(new Icons.Regular.Size20.Home())" IconColor="Color.Accent">Home</FluentNavLink>
                <AuthorizeView>
                    <NotAuthorized>                
                        <FluentNavLink Href="bff/login" Icon="@(new Icons.Regular.Size20.LockClosed())" IconColor="Color.Accent">Login</FluentNavLink>
                        <FluentNavLink Href="https://iam.accountingengine.com/..." Icon="@(new Icons.Regular.Size20.Guest())"           IconColor="Color.Accent">Register</FluentNavLink>
                    </NotAuthorized>
                    <Authorized>
                        @if(CurrentUserInfo != null && CurrentUserInfo.Companies.Any())
                        {
                            <FluentNavLink Href="..." Icon="@(new Icons.Regular.Size20.MountainTrail())" IconColor="Color.Accent">...</FluentNavLink>
                            <FluentNavLink Href="..." Icon="@(new Icons.Regular.Size20.BuildingLighthouse())" IconColor="Color.Accent">...</FluentNavLink>
                            <FluentNavLink Href="..." Icon="@(new Icons.Regular.Size20.ServiceBell())" IconColor="Color.Accent">...</FluentNavLink>
                            <FluentNavLink Href="..." Icon="@(new Icons.Regular.Size20.VehicleCarParking())" IconColor="Color.Accent">...</FluentNavLink>
                            <FluentNavLink Href="..." Icon="@(new Icons.Regular.Size20.EyeTracking())" IconColor="Color.Accent">...</FluentNavLink>
                        }
                        <FluentNavLink Href="@context.User.FindFirst("bff:logout_url")?.Value" Icon="@(new Icons.Regular.Size20.LockClosed())" IconColor="Color.Accent">Logout</FluentNavLink>
                    </Authorized>
                </AuthorizeView>
            </FluentNavMenu>
        </nav>
    </div>
</div>  
``
@code
{
    [Parameter, EditorRequired]
    public CurrentUserInfo? CurrentUserInfo { get; set; }

    bool _Expanded { get; set; } = true;

    protected override void OnInitialized()
    {

        base.OnInitialized();
    }
}

🤔 Expected Behavior

No exception

😯 Current Behavior

System.ArgumentNullException: Value cannot be null. (Parameter 'jsObjectReference') at System.ArgumentNullException.Throw(String paramName) at System.ArgumentNullException.ThrowIfNull(Object argument, String paramName) at Microsoft.JSInterop.JSObjectReferenceExtensions.InvokeAsync[String](IJSObjectReference jsObjectReference, String identifier, Object[] args) at Microsoft.FluentUI.AspNetCore.Components.FluentKeyCode.OnAfterRenderAsync(Boolean firstRender) in /_/src/Core/Components/KeyCode/FluentKeyCode.razor.cs:line 126 at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle, ComponentState owningComponentState)

💁 Possible Solution

🤷‍♂️ If I remove the NavMenu, there is no exception

🔦 Context

The application works normally but it throw exception to console

🌍 Your Environment

• OS Windows 10
• Browser Chrome
• .NET 8 Blazor App @rendermode= "@(new InteractiveWebAssemblyRenderMode(prerender: false))"
• Fluent UI Blazor Version 4.9.1

[vnbaaij]

Please change the title and supply reproduction code we can run

[SantosVictorero]

@vnbaaij, thanks for your response.

As I wrote in the "Possible Solution": If I remove the NavMenu, there is no exception. So the Javascript exception is created at: Microsoft.FluentUI.AspNetCore.Components.FluentKeyCode.OnAfterRenderAsync(Boolean firstRender) in /_/src/Core/Components/KeyCode/FluentKeyCode.razor.cs:line 126

This is a customized application that I am refactoring. Everything else works fine without Blazor FluentUI

Best

Santos

[vnbaaij]

I understand it is an issue with the NavMenu.

What I'm asking is that you supply us with ready to run reproduction code. We don't have capacity to craft and write code for every issue that gets raised. We understand that your code may be proprietary. In that case you create a new project specifically for sharing with us.

We simply ask you to help us to help you.

[SantosVictorero]

Understood!

I don't I have the time right now since I have to meet a deadline. I will try to put something together next week.

Thanks

[vnbaaij]

Closing this as we have not received reproduction code. We can re-open after we receive project.