diff --git a/components/common/UserNav/DropdownMenu.tsx b/components/common/UserNav/DropdownMenu.tsx index fb3ddc7deb..0c47158db3 100644 --- a/components/common/UserNav/DropdownMenu.tsx +++ b/components/common/UserNav/DropdownMenu.tsx @@ -8,6 +8,7 @@ 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, @@ -15,6 +16,7 @@ import { } from 'body-scroll-lock' import useLogout from '@bigcommerce/storefront-data-hooks/use-logout' + interface DropdownMenuProps { open?: boolean } @@ -75,7 +77,10 @@ const DropdownMenu: FC = ({ open = false }) => { className={cn(s.link, { [s.active]: pathname === href, })} - onClick={closeSidebarIfPresent} + onClick={() => { + setDisplay(false) + closeSidebarIfPresent() + }} > {name} @@ -86,9 +91,10 @@ const DropdownMenu: FC = ({ open = false }) => {
  • + onClick={() => { theme === 'dark' ? setTheme('light') : setTheme('dark') - } + setDisplay(false) + }} >
    Theme: {theme}{' '} diff --git a/lib/click-outside/click-outside.tsx b/lib/click-outside/click-outside.tsx index d3bba953c5..268fc13d98 100644 --- a/lib/click-outside/click-outside.tsx +++ b/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 | 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 diff --git a/public/vercel.svg b/public/vercel.svg index 5f387a32d8..c0a8ee464f 100644 --- a/public/vercel.svg +++ b/public/vercel.svg @@ -1,9 +1,9 @@ - - - - - - - + + + + + + +