Track menu state so we dont hide buttons when they open

packages/web/components/elements/DropdownElements.tsx

@@ -123,6 +123,7 @@ type DropdownProps = {
   disabled?: boolean
   css?: CSS
   modal?: boolean
+  onOpenChange?: (open: boolean) => void
 }
 
 export const DropdownSeparator = styled(Separator, {
@@ -142,7 +143,9 @@ export function DropdownOption(props: DropdownOptionProps): JSX.Element {
   return (
     <>
       <StyledItem
-        onSelect={props.onSelect}
+        onSelect={() => {
+          props.onSelect()
+        }}
         onClick={(event) => event.stopPropagation()}
       >
         {props.title ?? props.children}
@@ -165,9 +168,10 @@ export function Dropdown(
     alignOffset = 0,
     css,
     modal,
+    onOpenChange,
   } = props
   return (
-    <Root modal={modal}>
+    <Root modal={modal} onOpenChange={props.onOpenChange}>
       <DropdownTrigger disabled={disabled}>{triggerElement}</DropdownTrigger>
       <DropdownContent
         css={css}

packages/web/components/patterns/CardMenu.tsx

@@ -20,11 +20,15 @@ type CardMenuProps = {
   viewer: UserBasicData
   triggerElement: ReactNode
   actionHandler: (action: CardMenuDropdownAction) => void
+  onOpenChange?: (open: boolean) => void
 }
 
 export function CardMenu(props: CardMenuProps): JSX.Element {
   return (
-    <Dropdown triggerElement={props.triggerElement}>
+    <Dropdown
+      triggerElement={props.triggerElement}
+      onOpenChange={props.onOpenChange}
+    >
       {!props.item.isArchived ? (
         <DropdownOption
           onSelect={() => props.actionHandler('archive')}

packages/web/components/patterns/LibraryCards/LibraryGridCard.tsx

@@ -77,10 +77,14 @@ const siteName = (originalArticleUrl: string, itemUrl: string): string => {
 // Component
 export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
   const [isHovered, setIsHovered] = useState(false)
+  const [menuOpen, setMenuOpen] = useState(false)
+
   const originText =
     props.item.siteName ||
     siteName(props.item.originalArticleUrl, props.item.url)
 
+  console.log(props.item.title, 'menuOpen: ', menuOpen, 'isHovered', isHovered)
+
   return (
     <VStack
       css={{
@@ -99,11 +103,6 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
       alignment="start"
       distribution="start"
       onMouseEnter={() => {
-        const element = document.getElementById(props.item.id)
-        if (!element) {
-          return
-        }
-        element.focus()
         setIsHovered(true)
       }}
       onMouseLeave={() => {
@@ -142,7 +141,7 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
             <Box
               css={{
                 display: 'flex',
-                visibility: isHovered ? 'unset' : 'hidden',
+                visibility: isHovered || menuOpen ? 'unset' : 'hidden',
                 marginLeft: 'auto',
                 height: '30px',
                 width: '30px',
@@ -160,6 +159,7 @@ export function LibraryGridCard(props: LinkedItemCardProps): JSX.Element {
               <CardMenu
                 item={props.item}
                 viewer={props.viewer}
+                onOpenChange={(open) => setMenuOpen(open)}
                 actionHandler={props.handleAction}
                 triggerElement={
                   <DotsThreeVertical size={25} weight="bold" color="#ADADAD" />