diff --git a/package-lock.json b/package-lock.json index 1e4b839..55d89ac 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "unop-react-dropdown", - "version": "0.1.7", + "version": "0.2.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index c0c6f44..5e6ac37 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "version": "0.2.0", + "version": "0.2.1", "license": "MIT", "main": "dist/index.js", "typings": "dist/index.d.ts", diff --git a/src/index.tsx b/src/index.tsx index cb13e20..185f17c 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -38,27 +38,28 @@ const UnopDropdown: React.FC = ({ element.style.visibility = 'visible'; }, []); + const handler = (e: MouseEvent) => { + const path = e.composedPath(); + if (show && closeOnClickOut && !path.includes(dropdownMenuRef.current!)) { + handleAction(e); + } else { + if ( + show && + closeOnDropdownClicked && + path.includes(dropdownMenuRef.current!) + ) { + handleAction(e); + } + } + }; + useEffect(() => { if (closeOnClickOut || closeOnDropdownClicked) { - window.addEventListener('click', (e) => { - const path = e.composedPath(); - if ( - show && - closeOnClickOut && - !path.includes(dropdownMenuRef.current!) - ) { - handleAction(e); - } else { - if ( - show && - closeOnDropdownClicked && - path.includes(dropdownMenuRef.current!) - ) { - handleAction(e); - } - } - }); + window.addEventListener('click', handler); } + return () => { + window.removeEventListener('click', handler); + }; }, [show]); const displayMenuItem = (e: CustomMouseEvent) => {