fix(context-menu): render menu inline and use viewport coordinates

Signed-off-by: Lars Heinemann <lhein.smx@gmail.com>

Author: lhein

packages/module/src/behavior/withContextMenu.test.tsx

@@ -0,0 +1,44 @@
+import { ReactNode } from 'react';
+import { act, fireEvent, render, screen } from '@testing-library/react';
+
+import { WithContextMenuProps, withContextMenu } from './withContextMenu';
+
+let capturedReference: unknown;
+
+jest.mock('../components/contextmenu/ContextMenu', () => ({
+  __esModule: true,
+  default: ({ children, reference }: { children: ReactNode; reference: unknown }) => {
+    capturedReference = reference;
+    return <div data-testid="context-menu">{children}</div>;
+  }
+}));
+
+const WrappedComponent = ({ onContextMenu }: WithContextMenuProps) => (
+  <div data-testid="wrapped-node" onContextMenu={onContextMenu}>
+    Wrapped node
+  </div>
+);
+
+describe('withContextMenu', () => {
+  beforeEach(() => {
+    capturedReference = undefined;
+  });
+
+  it('should use viewport coordinates for point-based context menus', async () => {
+    const ComponentWithContextMenu = withContextMenu(() => [<div key="action">Action</div>])(WrappedComponent);
+
+    render(<ComponentWithContextMenu />);
+
+    await act(async () => {
+      fireEvent.contextMenu(screen.getByTestId('wrapped-node'), {
+        clientX: 120,
+        clientY: 140,
+        pageX: 420,
+        pageY: 540
+      });
+    });
+
+    expect(await screen.findByTestId('context-menu')).toBeInTheDocument();
+    expect(capturedReference).toEqual({ x: 120, y: 140 });
+  });
+});

packages/module/src/behavior/withContextMenu.tsx

@@ -31,8 +31,8 @@ export const withContextMenu =
         setReference(
           atPoint
             ? {
-                x: e.pageX,
-                y: e.pageY
+                x: e.clientX,
+                y: e.clientY
               }
             : e.currentTarget
         );

packages/module/src/components/contextmenu/ContextMenu.test.tsx

@@ -0,0 +1,29 @@
+import { ReactNode } from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+
+import ContextMenu from './ContextMenu';
+import { ContextMenuItem } from './index';
+
+jest.mock('../popper/Popper', () => ({
+  __esModule: true,
+  default: ({ children }: { children: ReactNode }) => <div data-testid="mock-popper">{children}</div>
+}));
+
+describe('ContextMenu', () => {
+  it('should render menu items inside the topology popper and close on select', () => {
+    const onRequestClose = jest.fn();
+
+    render(
+      <ContextMenu reference={{ x: 120, y: 140 }} onRequestClose={onRequestClose}>
+        <ContextMenuItem>First</ContextMenuItem>
+      </ContextMenu>
+    );
+
+    expect(screen.getByTestId('mock-popper')).toBeInTheDocument();
+
+    const menuItem = screen.getByRole('menuitem', { name: 'First' });
+    fireEvent.click(menuItem);
+
+    expect(onRequestClose).toHaveBeenCalledTimes(1);
+  });
+});

packages/module/src/components/contextmenu/ContextMenu.tsx

@@ -1,5 +1,5 @@
 import { useState, useCallback, useEffect } from 'react';
-import { Dropdown } from '@patternfly/react-core';
+import { Menu, MenuContent } from '@patternfly/react-core';
 import { css } from '@patternfly/react-styles';
 import topologyStyles from '../../css/topology-components';
 // FIXME fully qualified due to the effect of long build times on storybook
@@ -35,14 +35,12 @@ const ContextMenu: React.FunctionComponent<ContextMenuProps> = ({
 
   return (
     <Popper {...other} closeOnEsc closeOnOutsideClick open={isOpen} onRequestClose={handleOnRequestClose}>
-      <Dropdown
+      <Menu
         onSelect={handleOnRequestClose}
-        toggle={() => <></>}
         className={css(topologyStyles.topologyContextMenuCDropdownMenu)}
-        popperProps={{ appendTo: 'inline' }}
       >
-        {children}
-      </Dropdown>
+        <MenuContent>{children}</MenuContent>
+      </Menu>
     </Popper>
   );
 };