Closed emetrix closed 1 month ago
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.
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.
Yes, I'm seeing it too now. Re-opened.
The error is triggered in the web components script. Reproduce steps:
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...
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
π 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:
NavMenu.razor:
π€ 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