From edbb21cb66272fc5dd946a2a085f2ccc43fa97cd Mon Sep 17 00:00:00 2001
From: Hazem Krimi <krimihazem1@gmail.com>
Date: Mon, 14 Jun 2021 02:20:21 +0100
Subject: [PATCH] Update context menu component

---
 src/components/ContextMenu/index.tsx | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/components/ContextMenu/index.tsx b/src/components/ContextMenu/index.tsx
index 02b75f0..9acc97b 100644
--- a/src/components/ContextMenu/index.tsx
+++ b/src/components/ContextMenu/index.tsx
@@ -4,7 +4,7 @@ import { Text } from '..';
 
 type ContextMenuProps = {
   className?: string;
-  items: Array<{ label: string; action: () => void }>;
+  items: Array<{ label: string; action?: () => void }>;
   component: string;
 };
 
@@ -13,28 +13,26 @@ const ContextMenu = ({ items, component, className }: ContextMenuProps) => {
   const ref = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
-    const openMenu = () => setOpen(true);
-    const handleClickOutside = (event: MouseEvent) => {
-      if (ref.current && !ref.current.contains(event.target as Node)) {
-        setOpen(false);
-      }
-    };
+    const wrapper = ref.current;
+
+    const openMenu = () => setOpen(true);
+    const closeMenu = () => setOpen(false);
 
-    document.addEventListener('mousedown', handleClickOutside);
     (document.querySelector(`#${component}`) as HTMLElement)?.addEventListener(
       'mouseenter',
       openMenu
     );
+    ref.current?.addEventListener('mouseleave', closeMenu);
 
     return () => {
-      document.removeEventListener('mousedown', handleClickOutside);
       (document.querySelector(
         `#${component}`
       ) as HTMLElement)?.removeEventListener('mouseenter', openMenu);
+      wrapper?.removeEventListener('mouseleave', closeMenu);
     };
 
     // eslint-disable-next-line
-  }, [ref]);
+  }, [ref.current]);
 
   return (
     <Wrapper
@@ -54,8 +52,10 @@ const ContextMenu = ({ items, component, className }: ContextMenuProps) => {
             // eslint-disable-next-line
             <li
               onClick={() => {
-                setOpen(false);
-                action();
+                if (action) {
+                  setOpen(false);
+                  action();
+                }
               }}
               key={label}
             >