Wrap menu providers children in a container

Author: kraenhansen

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

@@ -1,4 +1,4 @@
-import React, { useMemo, useRef } from 'react';
+import React, { useMemo, useRef, useState } from 'react';
 import { Menu, MenuItem, MenuSeparator } from './leafygreen';
 import { css, cx } from '@leafygreen-ui/emotion';
 import { spacing } from '@leafygreen-ui/tokens';
@@ -17,6 +17,10 @@ export type {
   ContextMenuItemGroup,
 } from '@mongodb-js/compass-context-menu';
 
+const containerStyles = css({
+  height: '100%',
+});
+
 // TODO: Remove these once https://jira.mongodb.org/browse/LG-5013 is resolved
 
 const menuStyles = css({
@@ -44,8 +48,10 @@ export function ContextMenuProvider({
     item: ContextMenuItem
   ) => void;
 }) {
+  const [container, setContainer] = useState<HTMLElement | null>(null);
   return (
     <ContextMenuProviderBase
+      container={container}
       disabled={disabled}
       menuWrapper={(props) => (
         <ContextMenu
@@ -55,7 +61,9 @@ export function ContextMenuProvider({
       )}
       onContextMenuOpen={onContextMenuOpen}
     >
-      {children}
+      <div ref={setContainer} className={containerStyles}>
+        {children}
+      </div>
     </ContextMenuProviderBase>
   );
 }

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

@@ -25,11 +25,13 @@ export const ContextMenuContext = createContext<ContextMenuContextType | null>(
 
 export function ContextMenuProvider({
   disabled = false,
+  container,
   children,
   menuWrapper: Wrapper,
   onContextMenuOpen,
 }: {
   disabled?: boolean;
+  container: HTMLElement | null;
   children: React.ReactNode;
   menuWrapper: React.ComponentType<{
     menu: ContextMenuState & { close: () => void };
@@ -62,8 +64,8 @@ export function ContextMenuProvider({
   );
 
   useEffect(() => {
-    // Don't set up event listeners if we have a parent context
-    if (parentContext || disabled) return;
+    // We skip registering listeners when parentContext is known to avoid registering multiple (nested) listeners
+    if (parentContext || disabled || !container) return;
 
     function handleContextMenu(event: MouseEvent) {
       event.preventDefault();
@@ -86,7 +88,7 @@ export function ContextMenuProvider({
       });
     }
 
-    document.addEventListener('contextmenu', handleContextMenu);
+    container.addEventListener('contextmenu', handleContextMenu);
     window.addEventListener('resize', handleClosingEvent);
     window.addEventListener(
       'scroll',
@@ -100,13 +102,19 @@ export function ContextMenuProvider({
     );
 
     return () => {
-      document.removeEventListener('contextmenu', handleContextMenu);
+      container.removeEventListener('contextmenu', handleContextMenu);
       window.removeEventListener('resize', handleClosingEvent);
       window.removeEventListener('scroll', handleClosingEvent, {
         capture: true,
       });
     };
-  }, [disabled, handleClosingEvent, onContextMenuOpenRef, parentContext]);
+  }, [
+    disabled,
+    container,
+    handleClosingEvent,
+    onContextMenuOpenRef,
+    parentContext,
+  ]);
 
   const value = useMemo(
     () => ({