Fixing clickOutside

components/common/UserNav/DropdownMenu.tsx

@@ -8,13 +8,15 @@ import { Avatar } from '@components/common'
 import { Moon, Sun } from '@components/icons'
 import { useUI } from '@components/ui/context'
 import ClickOutside from '@lib/click-outside'
+
 import {
   disableBodyScroll,
   enableBodyScroll,
   clearAllBodyScrollLocks,
 } from 'body-scroll-lock'
 
 import useLogout from '@bigcommerce/storefront-data-hooks/use-logout'
+
 interface DropdownMenuProps {
   open?: boolean
 }
@@ -75,7 +77,10 @@ const DropdownMenu: FC<DropdownMenuProps> = ({ open = false }) => {
                       className={cn(s.link, {
                         [s.active]: pathname === href,
                       })}
-                      onClick={closeSidebarIfPresent}
+                      onClick={() => {
+                        setDisplay(false)
+                        closeSidebarIfPresent()
+                      }}
                     >
                       {name}
                     </a>
@@ -86,9 +91,10 @@ const DropdownMenu: FC<DropdownMenuProps> = ({ open = false }) => {
             <li>
               <a
                 className={cn(s.link, 'justify-between')}
-                onClick={() =>
+                onClick={() => {
                   theme === 'dark' ? setTheme('light') : setTheme('dark')
-                }
+                  setDisplay(false)
+                }}
               >
                 <div>
                   Theme: <strong>{theme}</strong>{' '}

lib/click-outside/click-outside.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useEffect, Ref, MouseEvent } from 'react'
+import React, { useRef, useEffect, MouseEvent } from 'react'
 import hasParent from './has-parent'
 
 interface ClickOutsideProps {
@@ -7,18 +7,12 @@ interface ClickOutsideProps {
   children: any
 }
 
-const ClickOutside = forwardRef(
-  (
-    { active = true, onClick, children }: ClickOutsideProps,
-    ref: Ref<HTMLDivElement> | null | any = {}
-  ) => {
-    const innerRef = ref?.current
+const ClickOutside = ({ active = true, onClick, children }: ClickOutsideProps) => {
+    const innerRef = useRef()
 
     const handleClick = (event: any) => {
-      if (!hasParent(event.target, innerRef)) {
+      if (!hasParent(event.target, innerRef?.current)) {
         if (typeof onClick === 'function') {
-          event.preventDefault()
-          event.stopImmediatePropagation()
           onClick(event)
         }
       }
@@ -38,8 +32,7 @@ const ClickOutside = forwardRef(
       }
     })
 
-    return React.cloneElement(children, { ref })
+    return React.cloneElement(children, { ref: innerRef })
   }
-)
 
 export default ClickOutside