microsoft / microsoft/fluentui-blazor
FluentMenu fails when first rendered with Open=true
@dvoituron is already working on this.
Since Aug 5, 2026.
- Dominant language
- C#
- Stars
- 4.8k
- Forks
- 483
- Avg merge
- 14h 41m
- Merged PRs (30d)
- 68
Description
Bug Report
A FluentMenu cannot be conditionally added to a page and opened in the same render. Rendering it for the first time with Open="true" races its asynchronous JavaScript initialization.
Observed downstream in the Aspire Dashboard with Microsoft.FluentUI.AspNetCore.Components 4.14.4.
Repro
<FluentButton Id="menu-anchor" @onclick="OpenMenu">
Actions
</FluentButton>
@if (_renderMenu)
{
<FluentMenu Anchor="menu-anchor" Open="true">
<FluentMenuItem>Action</FluentMenuItem>
</FluentMenu>
}
@code {
private bool _renderMenu;
private void OpenMenu()
{
_renderMenu = true;
}
}
Current behavior
The menu is displayed while its JavaScript modules are still initializing, resulting in a JS interop error:
AnchoredRegion module is required for keyboard navigation
FluentMenu.razor.js throws this when initialize receives menuOpen=true before the anchored-region module is available.
Expected behavior
A FluentMenu should support being added to the render tree for the first time with Open="true". It should finish initialization before displaying the menu and initializing keyboard navigation.
This pattern is useful when a page contains many menu buttons. Consumers can avoid constructing every menu and paying their JavaScript import/initialization costs during the initial page render, then create only the menu that the user opens.
Aspire workaround
AspireMenuButton currently:
- Starts observing the anchor before rendering
FluentMenu. - Renders the menu closed.
- Uses FluentMenu's first
aria-expandedwrite as a readiness signal that its JavaScript modules have initialized. - Sets
Open=trueonly after that signal.
Workaround source:
This works, but it relies on observing an implementation detail and requires downstream JavaScript solely to coordinate FluentMenu initialization.
Possible solutions
- Make FluentMenu wait for all required modules to finish loading before processing an initial
Open=truevalue. - Defer FluentMenu module imports and calls such as
initializeuntil the menu is first opened. That would make a closed FluentMenu inexpensive and remove the need for consumers to conditionally render it solely for performance.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.