fix: FluentMenu positioning & rendering not correct when created inside of a new containing block.

[DanielCordell]

🐛 Bug Report

When a <FluentMenu> is created inside of a new Containing Block (such as a div with container-type: inline-size to allow for container queries), it causes a few miscelaneous visual glitches. See Current Behavior for a more detailed breakdown.

💻 Repro or Code Sample

You can reproduce this trivially by going to https://www.fluentui-blazor.net/Menu and in devtools, adding the rule container-type: inline-size; to the .demo-section-example selector:

🤔 Expected Behavior

The menu should act as it does if there is no new containing block containing it.

😯 Current Behavior

Z-Index not taking effect

You can see that because of the new containing block being created, the high z-index of the menu isn't taking effect:

Compare that to the same thing without the containing block:

Un-Anchored menus appearing at the wrong coordinates

When creating an un-anchored menu (such as a context menu), the position of the fixed menu element becomes relative to the containing block, and not relative to the window:

• Blue dot is where I right-clicked, the menu that spawned is circled in red.

Removing the container-type: inline-size cause the menu to go back to where it should:

💁 Possible Solution

Could menus spawn at the top-level, similar to the dialogs/toasts/tooltips? Perhaps a <FluentPopupProvider/>, or you could make use of one of the existing providers? That would ensure that no "local CSS" rules could affect the menus.

🔦 Context

I'm sure this will affect other contexts, but creating menus in layouts that are dynamic & adjust via container queries is where I've noticed this. As you can see from this MDN link, lots of things can spawn a new containing block and it would be frustrating for me if the menu just couldn't be used in these cases.

There may be other fluent components that act in a similar way that will likely have the same issues.

🌍 Your Environment

• OS & Device: Windows on PC
• Browser: Affects Chrome, Edge & Firefox
• .NET and FAST Version: Tested locally on Net6 & FluentUI Blazor 3.5.5, but also able to reproduce on https://www.fluentui-blazor.net/Menu on which I assume is the latest release.

[vnbaaij]

Hi,

This is not something we will be able to support with the current Fluent design system (v1). It pre-dates browsers container support and I think it will be very hard to get it 'integrated' in a good and stable way.

I'm hopefull that the next version of the Web Components (v3) will support this. See https://web-components.fluentui.dev/?path=/docs/components-menu--menu and add container-type: inline-size; to one of the buttons. Menus show up in the right place.

ps: thanks for creating such a good issue report!

[vnbaaij]

If you are able and have time to work on a provider kind of solution, we will happily take a PR

[DanielCordell]

I'm hopefull that the next version of the Web Components (v3) will support this. See https://web-components.fluentui.dev/?path=/docs/components-menu--menu and add container-type: inline-size; to one of the buttons. Menus show up in the right place.

I'm not too sure. On that site, if I add container-type: inline-size to the grey container (shaded crudely in red) it seems to still render weirdly:

Perhaps this is something that may need forwarding on to the web components repo?

If you are able and have time to work on a provider kind of solution, we will happily take a PR

I'd be happy to have a go when I get the time! :)

We did something similar at work a while back before migrating to Fluent, so it's definitely doable.

[vnbaaij]

Perhaps this is something that may need forwarding on to the web components repo?

Yes! Would be great if you can raise an issue there.

[vnbaaij]

Closing this as we can't solve it on our side.