fix(MenuItem): prevent to dismiss menu on scroll inside menu (#17294)

* fix(MenuItem): prevent to dimiss menu on scroll inside menu

* fix(MenuItem): add changelog

* Update packages/fluentui/react-northstar/src/components/Menu/MenuItem.tsx

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

Co-authored-by: Oleksandr Fediashov <alexander.mcgarret@gmail.com>

packages/fluentui/CHANGELOG.md

@@ -43,6 +43,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Updating various icons, `ArrowSortIcon`, `BreakoutRoomIcon`, `CalendarAgendaIcon`, `CallControlCloseTrayIcon`, `PlayIcon`, `TenantPersonalIcon` @notandrew ([#16723](https://github.com/microsoft/fluentui/pull/16723))
 - Fix touch scroll for `Dialog` @assuncaocharles ([#17054](https://github.com/microsoft/fluentui/pull/17054))
 - Prevent scrollable parent element or viewport scroll when an item is seleted in `Dropdown` @yuanboxue-amber ([#17222](https://github.com/microsoft/fluentui/pull/17222))
+- Prevent menu to be dismissed when scroll happens inside `Menu` boundaries @assuncaocharles ([#17294](https://github.com/microsoft/fluentui/pull/17294))
 
 ## Features
 - For `Tree`, add keyboard navigation based on the first letter of the text content of tree items @yuanboxue-amber ([#16994](https://github.com/microsoft/fluentui/pull/16994))

packages/fluentui/react-northstar/src/components/Menu/MenuItem.tsx

@@ -308,7 +308,10 @@ export const MenuItem = compose<'a', MenuItemProps, MenuItemStylesProps, {}, {}>
 
     const dismissOnScroll = (e: TouchEvent | WheelEvent) => {
       if (!isSubmenuOpen()) return;
-      trySetMenuOpen(false, e);
+      // we only need to dismiss if the scroll happens outside the menu
+      if (!menuRef.current.contains(e.target as Node)) {
+        trySetMenuOpen(false, e);
+      }
     };
 
     const outsideClickHandler = (e: MouseEvent) => {