FluentMenu does not close on outside click and @bind-open is not triggered

[aboudoux]

Description:
I'm experiencing an issue with the FluentMenu component:

When I click outside the FluentMenu, it does not close automatically.
When I click on one of the buttons inside the menu, it closes as expected.
Additionally, the @bind-open callback is not being called regardless of whether UseMenuService is set to true or false.

Steps to Reproduce:

Create a FluentMenu component.
Set UseMenuService to either true or false.
Open the FluentMenu.
Click outside the FluentMenu: the menu remains open.
Click on one of the buttons inside the menu: the menu closes as expected.

Expected Behavior:

The FluentMenu should automatically close when clicking outside of it.
The @bind-open callback should be invoked when the menu is opened or closed.

Questions:

Is this the intended behavior for FluentMenu?
Should I manage the closing of the menu manually when clicking outside?

Any insights or guidance would be greatly appreciated. Thank you!

[vnbaaij]

Converting this to a discussion as it is not an issue in the components but in their application.

Without source and details on how your app is running (Server/WAMS, rendermode, version, ...) it is impossible to know what is going on. As you can see in the first example on the right in the demo site, the menu closes when you click outside of it. It also uses the @bind-Open callback

[aboudoux]

Thank you for your response.

My application is built with Blazor .NET 8 using SSR / InteractiveServerRenderMode. Here’s how I have registered the library:

[App.razor]
<script src="_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lib.module.js" type="module" async></script>

[MainLayout.razor]

<FluentMenuProvider />
<FluentTooltipProvider />

I'm only using these two components.

[_Imports.razor]
@using Microsoft.FluentUI.AspNetCore.Components

Here's how I use the menu in my application:

<div draggable="true" @ondragstart="OnDragStart" class="@Item.DepartureColor(Clock) border rounded-lg text-center text-nowrap relative cursor-grab @Tailwind.FlexCol()" @ondblclick="() => OnDoubleClick.InvokeAsync((new ManufacturingOrderId(Item.Name), ParentId))">
    @if (ChildContent == null)
    {
        <div id="@(Item.Name + ParentId)" class="border-1 cursor-pointer active:scale-90 select-none hover:opacity-80 h-fit w-fit absolute top-1 right-0 hover:bg-yellow-100 hover:rounded-lg" @onclick="() => ShowMenu = !ShowMenu">
            @SvgIcon.DotMenu(16)
        </div>
        <span class="font-light text-sm">@Item.Name</span>
        <div class="@Tailwind.FlexRow(HorizontalAlign.Center) justify-between px-1 gap-1">
            <span class="flex flex-row items-center">@SvgIcon.TShirt(16) @Item.Quantity</span>
            <span class="flex flex-row items-center">@SvgIcon.Timer(16) @Item.Time</span>
            <span class="flex flex-row items-center">@SvgIcon.Truck(16) @Item.Departure.Value</span>
        </div>
        <FluentMenu Id="@("menu" + Item.Name + ParentId)" Anchor="@(Item.Name + ParentId)" @bind-Open="ShowMenu" UseMenuService="true">
            <FluentMenuItem>Menu1</FluentMenuItem>
            <FluentMenuItem>Menu2</FluentMenuItem>
            <FluentMenuItem>Menu3</FluentMenuItem>
        </FluentMenu>
    }
    else
    {
        @ChildContent
    }
</div>

Please let me know if you need any additional details.

[rpodevns]

The FluentMenuProvider adds a fluent-overlay with a z-index: 9900, so any custom CSS (like @Item.DepartureColor(Clock)) with a higher z-index might block clicks on the overlay. Check the DOM to see if elements overlap the fluent-overlay.

For further troubleshooting, create a minimal, copy/paste code snippet that shows the issue -- without external libraries -- and post it here.

[vnbaaij]

[App.razor]

<script src="_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.lib.module.js" type="module" async></script>

You don't need this. The library takes care of loading the script.

You mention SSR. Is the menu component on a SSR page or on an interactive page?