Properly pass menu target to submenu items (microsoft#21162)

* Properly pass menu target to submenu items * Change files
mlp73 · Jan 17, 2022 · b43da1f · b43da1f
1 parent a85c535
commit b43da1f
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/change/@fluentui-react-55f24add-1f2f-4771-9a0e-f68612e8ad4e.json b/change/@fluentui-react-55f24add-1f2f-4771-9a0e-f68612e8ad4e.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Properly pass menu target to submenu items",
+  "packageName": "@fluentui/react",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react/src/components/ContextualMenu/ContextualMenu.base.tsx b/packages/react/src/components/ContextualMenu/ContextualMenu.base.tsx
@@ -196,7 +196,7 @@ function useSubMenuState(
 
     if (item) {
       submenuProps = {
-        items: getSubmenuItems(item)!,
+        items: getSubmenuItems(item, { target: menuTarget })!,
         target: submenuTarget,
         onDismiss: onSubMenuDismiss,
         isSubMenu: true,
@@ -619,7 +619,7 @@ function useMouseHandlers(
     ev: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,
     target: HTMLElement,
   ): void => {
-    const items = getSubmenuItems(item);
+    const items = getSubmenuItems(item, { target: menuTarget });
 
     // Cancel an async menu item hover timeout action from being taken and instead
     // just trigger the click event instead.