diff --git a/src/components/Menu/index.tsx b/src/components/Menu/index.tsx index 0aea451..b7fbcfa 100644 --- a/src/components/Menu/index.tsx +++ b/src/components/Menu/index.tsx @@ -8,7 +8,7 @@ type MenuProps = { icon: React.SVGProps; avoid?: boolean; label: string; - action: () => void; + action?: () => void; }>; component: string; }; @@ -18,28 +18,26 @@ const Menu = ({ items, component, className }: MenuProps) => { const ref = useRef(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?.addEventListener('mouseleave', closeMenu); }; // eslint-disable-next-line - }, [ref]); + }, [ref.current]); return ( { // eslint-disable-next-line
  • { - setOpen(false); - action(); + if (action) { + setOpen(false); + action(); + } }} key={label} >