diff --git a/packages/fluentui/CHANGELOG.md b/packages/fluentui/CHANGELOG.md
index e74a4e16beb1c..7f34dc0bb10b0 100644
--- a/packages/fluentui/CHANGELOG.md
+++ b/packages/fluentui/CHANGELOG.md
@@ -29,6 +29,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Fix `FocusZone` to reset tabindex when focus is outside the zone with prop `shouldResetActiveElementWhenTabFromZone` @yuanboxue-amber ([#24463](https://github.com/microsoft/fluentui/pull/24463))
 - Change `useLayoutEffect` in `Dropdown` to `useIsomorphicLayoutEffect` @marwan38 ([#24559](https://github.com/microsoft/fluentui/pull/24559))
 - Fix styling mutation when merging themes in `Dropdown` @petrjaros ([#24787](https://github.com/microsoft/fluentui/pull/24787))
+- Fix `Toolbar` submenu closing when another submenu is opened @miroslavstastny ([#24836](https://github.com/microsoft/fluentui/pull/24836))
 
 ### Performance
 - Avoid memory trashing in `felaExpandCssShorthandsPlugin` @layershifter ([#24663](https://github.com/microsoft/fluentui/pull/24663))
diff --git a/packages/fluentui/docs/src/examples/components/Toolbar/Content/ToolbarExampleMenuWithSubmenu.shorthand.steps.ts b/packages/fluentui/docs/src/examples/components/Toolbar/Content/ToolbarExampleMenuWithSubmenu.shorthand.steps.ts
index 827a3308a9184..13c398590c955 100644
--- a/packages/fluentui/docs/src/examples/components/Toolbar/Content/ToolbarExampleMenuWithSubmenu.shorthand.steps.ts
+++ b/packages/fluentui/docs/src/examples/components/Toolbar/Content/ToolbarExampleMenuWithSubmenu.shorthand.steps.ts
@@ -8,8 +8,10 @@ const config: ScreenerTestsConfig = {
       builder
         .click(`.${toolbarItemWrapperClassName} button`)
         .snapshot('Shows menu')
-        .keys(`.${toolbarMenuItemClassName}:nth-child(1)`, keys.rightArrow)
-        .snapshot('Opens submenu'),
+        .keys(`.${toolbarMenuItemClassName}#ToolbarExampleMenuWithSubmenu_Play`, keys.rightArrow)
+        .snapshot('Opens first submenu')
+        .click(`.${toolbarMenuItemClassName}#ToolbarExampleMenuWithSubmenu_Appearance`)
+        .snapshot('Opens second submenu'),
   ],
 };
 
diff --git a/packages/fluentui/docs/src/examples/components/Toolbar/Content/ToolbarExampleMenuWithSubmenu.shorthand.tsx b/packages/fluentui/docs/src/examples/components/Toolbar/Content/ToolbarExampleMenuWithSubmenu.shorthand.tsx
index ed0afee0b4489..fba7fbc631781 100644
--- a/packages/fluentui/docs/src/examples/components/Toolbar/Content/ToolbarExampleMenuWithSubmenu.shorthand.tsx
+++ b/packages/fluentui/docs/src/examples/components/Toolbar/Content/ToolbarExampleMenuWithSubmenu.shorthand.tsx
@@ -37,12 +37,21 @@ const ToolbarExampleMenuWithSubmenuShorthand = () => {
           menu: [
             {
               key: 'play',
+              id: 'ToolbarExampleMenuWithSubmenu_Play',
               content: 'Play',
               icon: <PlayIcon />,
               menu: {
                 items: ['Play with audio', { content: 'Play with video', key: 'playVideo', menu: ['HD', 'Full HD'] }],
               },
             },
+            {
+              key: 'appearance',
+              id: 'ToolbarExampleMenuWithSubmenu_Appearance',
+              content: 'Appearance',
+              menu: {
+                items: ['Centered Layout', 'Zen', 'Zoom In', 'Zoom Out'],
+              },
+            },
             { key: 'pause', content: 'Pause', icon: <PauseIcon /> },
             { key: 'divider', kind: 'divider' },
             'Without icon',
diff --git a/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarMenuItem.tsx b/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarMenuItem.tsx
index ebb0a36e01780..3a78c14b67dbd 100644
--- a/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarMenuItem.tsx
+++ b/packages/fluentui/react-northstar/src/components/Toolbar/ToolbarMenuItem.tsx
@@ -416,7 +416,12 @@ export const ToolbarMenuItem = compose<'button', ToolbarMenuItemProps, ToolbarMe
                     </ToolbarVariablesProvider>
                   </Popper>
                 </Ref>
-                <EventListener listener={outsideClickHandler(getRefs)} target={context.target} type="click" />
+                <EventListener
+                  capture={true}
+                  listener={outsideClickHandler(getRefs)}
+                  target={context.target}
+                  type="click"
+                />
               </>
             );
           }}