[dev-v5] FluentMenu - Improve positioning and add mouseout handling for submenu closure

src/Core.Scripts/src/Components/Menu/FluentMenu.ts

@@ -1,8 +1,35 @@
-import { Menu, MenuList } from "@fluentui/web-components";
+import { Menu, MenuItem, MenuList } from "@fluentui/web-components";
 import { DotNet } from "../../d-ts/Microsoft.JSInterop";
 
 export namespace Microsoft.FluentUI.Blazor.Components.Menu {
   const menuAbortControllers = new Map<string, AbortController>();
+  const menuListsWithMouseOutWorkaround = new WeakSet<MenuList>();
+
+  // Closes an open submenu when the pointer leaves, even if its parent menu item retains focus.
+  function handleMenuListMouseOut(event: MouseEvent) {
+    const relatedTarget = event.relatedTarget;
+
+    for (const target of event.composedPath()) {
+      if (!(target instanceof MenuItem)) {
+        continue;
+      }
+
+      const submenu = target.submenu;
+      if (!submenu?.matches(":popover-open")) {
+        continue;
+      }
+
+      if (relatedTarget instanceof Node && target.contains(relatedTarget)) {
+        continue;
+      }
+
+      if (submenu.contains(document.activeElement)) {
+        continue;
+      }
+
+      submenu.togglePopover(false);
+    }
+  }
 
   /**
    * Initializes the menu by associating it with a trigger element and setting up the necessary styles for positioning.
@@ -42,6 +69,11 @@ export namespace Microsoft.FluentUI.Blazor.Components.Menu {
       menuList.style["position-anchor" as any] = `--anchor-${triggerId}`;
       menu.slottedTriggersChanged(menu.slottedTriggers ?? [], [trigger]);
 
+      if (!menuListsWithMouseOutWorkaround.has(menuList)) {
+        menuList.addEventListener("mouseout", handleMenuListMouseOut);
+        menuListsWithMouseOutWorkaround.add(menuList);
+      }
+
       menuAbortControllers.get(id)?.abort();
       if (dotNetHelper) {
         const abortController = new AbortController();

src/Core/Components/Menu/FluentMenuList.razor.css

@@ -2,3 +2,11 @@
 fluent-menu fluent-menu-list:not([popover]) {
     display: none;
 }
+
+/* Fix #5207 */
+fluent-menu-item>fluent-menu-list[slot="submenu"] {
+    position-try-fallbacks:
+        flip-inline,
+        flip-block,
+        flip-block flip-inline;
+}