Comments (5)
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.
from fluentui-blazor.
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.
from fluentui-blazor.
Yes, I'm seeing it too now. Re-opened.
from fluentui-blazor.
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...
from fluentui-blazor.
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
from fluentui-blazor.
Related Issues (20)
- fix:[a11y sev2] OnRowClick is not triggered on keyboard enter in DataGrid
- fix: Dialog.Hide() doesn't hide in DialogService/FluentDialog HOT 5
- Change FluentButton background HOT 1
- fix: Setting a design token resets the FluentDesignTheme color
- feat: add @ref to form inputs HOT 5
- feat: Support read-only collections as items in `<FluentDataGrid>` with `ItemsProvider` HOT 1
- RawEventHandlers fluent-menu-item has error HOT 6
- FluentDatePicker triggers onfocusout event before bind-value update HOT 1
- fix: FluentTextEdit does not update bound value prior to Form onValidSubmit. HOT 2
- fix: Cannot set `ValueChanged` without binding in `FluentNumberField` HOT 2
- fix: Cannot set properties of null (setting '_blazorInputFileNextFileId') when FluentInputFile is used in EditForm HOT 3
- fix: In a wasm application, when installed on an iOS Fluent Tabs does not show overflow badge and throw an exception HOT 1
- fix: ButtonClick toggel FluentAccordionItem in HeadingTemplate HOT 1
- feat: add Format or Suffix to the FluentNumberField HOT 4
- fix: Value binding not working in FluentSlider HOT 2
- FR: Improve FluentTimePicker 🕒 HOT 1
- fix: FluentSelect doesn't render properly when changing both Value and Items HOT 3
- fix: Autofocus does not work reliable for TextFields in dialogs HOT 1
- fix: FluentRadio cannot be focused from javascript in MAUI/Blazor application
- Blazor error when visiting fluentui-blazor.net
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from fluentui-blazor.