microsoft
feat: add automatic position adjustment to FluentMenu to prevent opening off-screen.
🙋 Feature Request
It would be great if the <FluentMenu> component would adjust the position it was created in if it would be hidden by being partially outside of the window. This would make the menus function similarly to native menus that dynamically adjust to avoid being obscured.
🤔 Expected Behavior
Menus upon opening adjust their position to avoid being partially outside of the window.
(manually adjusted in this screenshot below)
😯 Current Behavior
The menu appears half "outside" of the window, meaning it cannot be interacted with.
This occurs for both anchored and non-anchored menus.
🔦 Context
Menus on the right-hand-side of the window / at the bottom of the window are being cut off by the window itself.
This will be fixed the next version (v3) of the underlying web components. We can't change that ourselves.
Awesome, thanks for the update! Is there a specific timeline as to when V3 comes out, and in what version of FluentUI Blazor that would apply to? (e.g. 4+) I can't find anything on the FluentUI repo about a V3 release date.
It is currently in beta stage. See https://web-components.fluentui.dev/?path=/docs/concepts-introduction--page. The code is in the web-components-v3 branch in the FluentUI repo.
We have only done some initial testing with this and are waiting for the web components to stabalize. As a lot of things (parameters, token, etc) will change, it will be a new major release of the library on our side (so v5 or v6).
One thing we are changing is adding VerticalThreshold and HorizontalThreshold parameters which will help in positioning the menu better. See #1640 for more info. I'll close this issue in favor of that one