fix: JS exceptions in NavMenu with tooltips

[emetrix]

🐛 Bug Report

Javascript exceptions are thrown when I use FluentTooltips in a FluentNavMenu. This issue seems only to occur if the FluentNavMenu has been collapsed and expanded at least once.

💻 Repro or Code Sample

MainLayout.razor:

...
<FluentTooltipProvider />
...

NavMenu.razor:

<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">
        <FluentNavMenu Id="main-menu" Collapsible="true" Width="250" Title="Navigation menu" @bind-Expanded="expanded" CustomToggle="true">
            <FluentNavLink Href="/" Match="NavLinkMatch.All" Icon="@(new Icons.Regular.Size20.Home())" IconColor="Color.Accent">Home</FluentNavLink>
            <FluentNavLink Id="counter" Href="counter" Icon="@(new Icons.Regular.Size20.NumberSymbolSquare())" IconColor="Color.Accent">Counter</FluentNavLink>
            <FluentNavLink Id="weather" Href="weather" Icon="@(new Icons.Regular.Size20.WeatherPartlyCloudyDay())" IconColor="Color.Accent">Weather</FluentNavLink>

            @if (expanded == false)
            {
                <FluentTooltip Anchor="counter" HideTooltipOnCursorLeave="true" Position=TooltipPosition.End Delay=200>Counter</FluentTooltip>
                <FluentTooltip Anchor="weather" HideTooltipOnCursorLeave="true" Position=TooltipPosition.End Delay=200>Weather</FluentTooltip>
            }
        </FluentNavMenu>
    </nav>
</div>

@code {
    private bool expanded = true;
}

🤔 Expected Behavior

No javascript exceptions should happen.

😯 Current Behavior

https://github.com/microsoft/fluentui-blazor/assets/13239872/3dd5ebab-6cbb-4ef4-ae3e-cc320630974b

💁 Possible Solution

🔦 Context

I want to only display the tooltips for FluentNavLinks if the NavMenu is collapsed.

🌍 Your Environment

• OS & Device: Windows on PC
• Browser Microsoft Edge
• .NET and Fluent UI Blazor library Version 8.0.6 and 4.9.0

[vnbaaij]

You are coding the logic for the tooltips inside of the FluentNavMenu which is not necessary and leads to this result. I think it is because things are happening in the renderprocess of the component which mess with the (expanded) state.

Not diving further into this because of time constraints and it can easily be solved by moving the @if block outside of the FluentNavMenu tag.

[emetrix]

Hi Vincent,

changing code

<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">
        <FluentNavMenu Id="main-menu" Collapsible="true" Width="250" Title="Navigation menu" @bind-Expanded="expanded" CustomToggle="true">
            <FluentNavLink Href="/" Match="NavLinkMatch.All" Icon="@(new Icons.Regular.Size20.Home())" IconColor="Color.Accent">Home</FluentNavLink>
            <FluentNavLink Id="counter" Href="counter" Icon="@(new Icons.Regular.Size20.NumberSymbolSquare())" IconColor="Color.Accent">Counter</FluentNavLink>
            <FluentNavLink Id="weather" Href="weather" Icon="@(new Icons.Regular.Size20.WeatherPartlyCloudyDay())" IconColor="Color.Accent">Weather</FluentNavLink>
        </FluentNavMenu>

        @if (expanded == false)
        {
            <FluentTooltip Anchor="counter" HideTooltipOnCursorLeave="true" Position=TooltipPosition.End Delay=200>Counter</FluentTooltip>
            <FluentTooltip Anchor="weather" HideTooltipOnCursorLeave="true" Position=TooltipPosition.End Delay=200>Weather</FluentTooltip>
        }
    </nav>
</div>

@code {
    private bool expanded = true;
}

does not change the behaviour. The exceptions still occur.

[vnbaaij]

Yes, I'm seeing it too now. Re-opened.

[vnbaaij]

The error is triggered in the web components script. Reproduce steps:

• Collapse the menu
• Do not invoke a tooltip
• Expand the menu
• Hover over a menu item that would show a tooltip

I can see that on our side the tooltips get added to the provider when the menu is collapsed and that they get removed once the menu is expanded.

Not sure if we will be able to prevent this error on our side...

[vnbaaij]

I've confirmed internally that this is an issue with the web components script. Unfortunately, i will not be fixed anymore in the v2 branch. Closing it here because we can't fix this