🐛 Bug Report

Using FluentUI 4.6.1 in a Blazor app (not WASM), the following code causes the menu to flicker uncontrollably when running under the debugger (Rider).

I am completely new to Blazor/FluentUI, so please forgive any stupidities I may have done.

💻 Repro or Code Sample

Create a FluentUI Blazor app using the templates. Replace the code in NavMenu.razor with this:

@rendermode InteractiveServer

<div class="navmenu">
    <input type="checkbox" title="Menu expand/collapse toggle" id="navmenu-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();">
        <FluentStack Orientation="Orientation.Horizontal">
            <FluentNavMenuTree Collapsible="true" Width="250" Title="Navigation Demo">
                <FluentNavMenuLink Text="Home" Icon="@(new Icons.Regular.Size24.Home())" Href="/"/>
                <FluentNavMenuGroup Text="Settings">
                    <FluentNavMenuLink Text="Item 1" Icon="@(new Icons.Regular.Size24.EditSettings())" Href="/someUrl"/>
                    <FluentNavMenuLink Text="Item 2" Icon="@(new Icons.Regular.Size24.Key())" Href="/someOtherUrl"/>
                </FluentNavMenuGroup>
            </FluentNavMenuTree>
        </FluentStack>
    </nav>
</div>

@code {
}

🤔 Expected Behavior

The nav menu is usable and not flickering when running under the debugger.

😯 Current Behavior

https://github.com/microsoft/fluentui-blazor/assets/29521512/065411f8-5f08-4046-afc2-92c429f6ae12

💁 Possible Solution

🔦 Context

🌍 Your Environment

OS & Device: Apple M2 Max, MacOS Sonoma 14.4.1
Browser: Microsoft Edge (123.0.2420.97), Google Chrome (123.0.6312.124)
.NET and Fluent UI Blazor library Version: 8.0.201, 4.6.1
IDE: 2024.1 #RD-24.14494.307

microsoft / fluentui-blazor

FluentNavMenuTree flickers erratically in Debug Mode #1872