*fix remove focus trap from popover

*fix Table context menu appearance on header cells
hazelcast · Nov 8, 2023 · 6f1afce · 6f1afce
1 parent a295fff
commit 6f1afce
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 7 deletions.
diff --git a/packages/ui/src/ContextMenu.tsx b/packages/ui/src/ContextMenu.tsx
@@ -27,6 +27,9 @@ export const ContextMenu = ({ anchorElement, offset, items }: ContextMenuProps)
 
   const handleContextMenuOpen = useCallback(
     (e: MouseEvent) => {
+      if (!anchorElement || (!anchorElement.contains(e.target as Node) && e.target !== anchorElement)) {
+        return
+      }
       e.preventDefault()
 
       const currentOffset = getOffset()
@@ -44,20 +47,20 @@ export const ContextMenu = ({ anchorElement, offset, items }: ContextMenuProps)
 
       setCoords({ top, left })
     },
-    [setCoords, getOffset],
+    [setCoords, getOffset, anchorElement],
   )
   const handleContextMenuClose = useCallback(() => {
     setCoords(null)
   }, [setCoords])
 
   useIsomorphicLayoutEffect(() => {
     if (anchorElement) {
-      anchorElement.addEventListener('contextmenu', handleContextMenuOpen, false)
+      document.body.addEventListener('contextmenu', handleContextMenuOpen, false)
     }
     return () => {
-      anchorElement?.removeEventListener('contextmenu', handleContextMenuOpen)
+      document.body.removeEventListener('contextmenu', handleContextMenuOpen)
     }
-  }, [handleContextMenuOpen, anchorElement])
+  }, [handleContextMenuOpen])
   useIsomorphicLayoutEffect(() => {
     if (coords) {
       document.body.addEventListener('click', handleContextMenuClose, false)

diff --git a/packages/ui/src/Table/TableContent.tsx b/packages/ui/src/Table/TableContent.tsx
@@ -1,6 +1,6 @@
 import cn from 'classnames'
-import { IgnoreKeys } from 'react-hotkeys'
-import React, { AnchorHTMLAttributes, FC, LegacyRef, MutableRefObject, ReactNode } from 'react'
+import { HotKeys, IgnoreKeys } from 'react-hotkeys'
+import React, { AnchorHTMLAttributes, FC, LegacyRef, MutableRefObject, ReactNode, useCallback, MouseEvent } from 'react'
 import { Cell as CellType, ColumnInterfaceBasedOnValue, Row as RowType, Column, UseResizeColumnsState } from 'react-table'
 
 import { Loader } from '../Loader'
@@ -58,6 +58,11 @@ export const TableContent = <D extends object>(props: TableContentProps<D>) => {
     selectedColumnValuesRef,
   } = props
 
+  const handleOnContesxtMenu = useCallback((e: MouseEvent<HotKeys>) => {
+    // disable table custom context menu
+    e.stopPropagation()
+  }, [])
+
   return (
     // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
     <div
@@ -134,7 +139,7 @@ export const TableContent = <D extends object>(props: TableContentProps<D>) => {
             </Row>
             {row.isExpanded
               ? renderRowSubComponent && (
-                  <IgnoreKeys tabIndex={-1} className={styles.subRowWrapper}>
+                  <IgnoreKeys tabIndex={-1} className={styles.subRowWrapper} onContextMenu={handleOnContesxtMenu}>
                     {renderRowSubComponent(row)}
                   </IgnoreKeys>
                 )