fix: add tests and fix bug with menu auto-closing

Author: gagik

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

@@ -28,7 +28,7 @@ export function ContextMenu({ menu }: ContextMenuWrapperProps) {
     if (!menu.isOpen) {
       menu.close();
     }
-  }, [menu, menu.isOpen]);
+  }, [menu.isOpen]);
 
   return (
     <div

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

@@ -0,0 +1,45 @@
+import React from 'react';
+import { render } from '@mongodb-js/testing-library-compass';
+import { expect } from 'chai';
+import { ContextMenuProvider } from './context-menu-provider';
+import type { ContextMenuWrapperProps } from './types';
+
+describe('ContextMenuProvider', function () {
+  const TestMenu: React.FC<ContextMenuWrapperProps> = () => (
+    <div data-testid="test-menu">Test Menu</div>
+  );
+
+  const TestComponent = () => (
+    <div data-testid="test-content">Test Content</div>
+  );
+
+  describe('when nested', function () {
+    it('throws an error when providers are nested', function () {
+      expect(() => {
+        render(
+          <ContextMenuProvider wrapper={TestMenu}>
+            <div>
+              <ContextMenuProvider wrapper={TestMenu}>
+                <TestComponent />
+              </ContextMenuProvider>
+            </div>
+          </ContextMenuProvider>
+        );
+      }).to.throw(
+        'Duplicated ContextMenuProvider found. Please remove the nested provider.'
+      );
+    });
+  });
+
+  describe('when not nested', function () {
+    it('renders without error', function () {
+      render(
+        <ContextMenuProvider wrapper={TestMenu}>
+          <TestComponent />
+        </ContextMenuProvider>
+      );
+
+      expect(document.querySelector('[data-testid="test-content"]')).to.exist;
+    });
+  });
+});

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

@@ -4,6 +4,7 @@ import React, {
   useState,
   useMemo,
   createContext,
+  useContext,
 } from 'react';
 import type { ContextMenuContext, ContextMenuState } from './types';
 import type { EnhancedMouseEvent } from './context-menu-content';
@@ -20,6 +21,9 @@ export function ContextMenuProvider({
     menu: ContextMenuState & { close: () => void };
   }>;
 }) {
+  // Check if there's already a parent context menu provider
+  const parentContext = useContext(Context);
+
   const [menu, setMenu] = useState<ContextMenuState>({
     isOpen: false,
     itemGroups: [],
@@ -37,6 +41,11 @@ export function ContextMenuProvider({
   );
 
   useEffect(() => {
+    // If there's a parent provider, don't add event listeners
+    if (parentContext) {
+      return;
+    }
+
     function handleContextMenu(event: MouseEvent) {
       event.preventDefault();
 
@@ -64,7 +73,7 @@ export function ContextMenuProvider({
       document.removeEventListener('contextmenu', handleContextMenu);
       window.removeEventListener('resize', handleClosingEvent);
     };
-  }, [handleClosingEvent]);
+  }, [handleClosingEvent, parentContext]);
 
   const value = useMemo(
     () => ({
@@ -73,6 +82,13 @@ export function ContextMenuProvider({
     [close]
   );
 
+  // Prevent accidental nested providers
+  if (parentContext) {
+    throw new Error(
+      'Duplicated ContextMenuProvider found. Please remove the nested provider.'
+    );
+  }
+
   const Wrapper = wrapper ?? React.Fragment;
 
   return (