fix: scrolling the context menu shouldn't close it COMPASS-9584 (#7172)

Author: paula-stacho

packages/compass-components/src/components/context-menu.tsx

@@ -1,6 +1,6 @@
 import React, { useMemo, useRef } from 'react';
 import { Menu, MenuItem, MenuSeparator } from './leafygreen';
-import { css } from '@leafygreen-ui/emotion';
+import { css, cx } from '@leafygreen-ui/emotion';
 import { spacing } from '@leafygreen-ui/tokens';
 
 import {
@@ -9,6 +9,7 @@ import {
   type ContextMenuItem,
   type ContextMenuItemGroup,
   type ContextMenuWrapperProps,
+  contextMenuClassName,
 } from '@mongodb-js/compass-context-menu';
 
 export type {
@@ -76,7 +77,7 @@ export function ContextMenu({ menu }: ContextMenuWrapperProps) {
         open={menu.isOpen}
         setOpen={menu.close}
         justify="start"
-        className={menuStyles}
+        className={cx(menuStyles, contextMenuClassName)}
         maxHeight={Number.MAX_SAFE_INTEGER}
       >
         {itemGroups.map((items: ContextMenuItemGroup, groupIndex: number) => {

packages/compass-context-menu/src/consts.ts

@@ -0,0 +1 @@
+export const contextMenuClassName = 'compass-context-menu';

packages/compass-context-menu/src/context-menu-provider.tsx

@@ -12,6 +12,7 @@ import {
   getContextMenuContent,
   type EnhancedMouseEvent,
 } from './context-menu-content';
+import { contextMenuClassName } from './consts';
 
 export const ContextMenuContext = createContext<ContextMenuContextType | null>(
   null
@@ -76,7 +77,16 @@ export function ContextMenuProvider({
 
     document.addEventListener('contextmenu', handleContextMenu);
     window.addEventListener('resize', handleClosingEvent);
-    window.addEventListener('scroll', handleClosingEvent, { capture: true });
+    window.addEventListener(
+      'scroll',
+      (e) => {
+        const isCompassContextMenu =
+          e.target instanceof HTMLElement &&
+          e.target.classList.contains(contextMenuClassName);
+        if (!isCompassContextMenu) handleClosingEvent(e);
+      },
+      { capture: true }
+    );
 
     return () => {
       document.removeEventListener('contextmenu', handleContextMenu);

packages/compass-context-menu/src/index.ts

@@ -5,3 +5,4 @@ export type {
   ContextMenuItemGroup,
   ContextMenuWrapperProps,
 } from './types';
+export { contextMenuClassName } from './consts';