Library

Web Components (@fluentui/web-components)

System Info

System:
  OS: Windows 10 10.0.22000
  CPU: (8) x64 Intel(R) Core(TM) i7-1065G7 CPU @ 1.30GHz
  Memory: 15.22 GB / 31.59 GB
Browsers:
  Edge: Spartan (44.22000.120.0), Chromium (103.0.1264.37), ChromiumDev (104.0.1293.5)
  Internet Explorer: 11.0.22000.120

Are you reporting Accessibility issue?

no

Reproduction

https://jsfiddle.net/dvoituron/724g3qya/

Bug Description

Actual Behavior

When I create a menu with sub-items. If this menu is placed at the border of the screen (on the right), the sub-menu is displayed above the first items of the main menu. In this case, the sub-menu is not displayed above the main menu.

// Using https://unpkg.com/@fluentui/web-components
<fluent-menu>
	<fluent-menu-item>Item 1
		<fluent-menu slot="submenu">
			<fluent-menu-item>Item 1.1</fluent-menu-item>
			<fluent-menu-item>Item 1.2
				<fluent-menu slot="submenu">
					<fluent-menu-item>Item 1.2.1</fluent-menu-item>
					<fluent-menu-item>Item 1.2.2</fluent-menu-item>
				</fluent-menu>
			</fluent-menu-item>
		</fluent-menu>
	</fluent-menu-item>
	<fluent-menu-item>Item 2</fluent-menu-item>
</fluent-menu>

This problem occurs with the @fluentui/web-components library but seems to work fine with @microsoft/fast-components.

Expected Behavior

The sub-menu must always be displayed above the previous menu.

Logs

No response

Requested priority

High

Products/sites affected

No response

Are you willing to submit a PR to fix?

no

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• The provided reproduction is a minimal reproducible example of the bug.