From 1d988aa0879bfbf43129385916a42e38e8cf46fe Mon Sep 17 00:00:00 2001
From: Nate Kelley <nate@buster.so>
Date: Tue, 30 Sep 2025 10:59:18 -0600
Subject: [PATCH] add a delay duration to popovers

---
 .../MentionInputSuggestionsItem.tsx           |  1 +
 .../src/components/ui/popover/PopoverBase.tsx | 28 +++++++++++++++++--
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/components/ui/inputs/MentionInputSuggestions/MentionInputSuggestionsItem.tsx b/apps/web/src/components/ui/inputs/MentionInputSuggestions/MentionInputSuggestionsItem.tsx
index 891689744..5c80b1818 100644
--- a/apps/web/src/components/ui/inputs/MentionInputSuggestions/MentionInputSuggestionsItem.tsx
+++ b/apps/web/src/components/ui/inputs/MentionInputSuggestions/MentionInputSuggestionsItem.tsx
@@ -83,6 +83,7 @@ const PopoverContentWrapper = ({
       align="start"
       className="p-0"
       content={popoverContent}
+      delayDuration={600}
     >
       {children}
     </Popover>
diff --git a/apps/web/src/components/ui/popover/PopoverBase.tsx b/apps/web/src/components/ui/popover/PopoverBase.tsx
index 6f8f637b1..098bdea25 100644
--- a/apps/web/src/components/ui/popover/PopoverBase.tsx
+++ b/apps/web/src/components/ui/popover/PopoverBase.tsx
@@ -13,23 +13,47 @@ interface PopoverProps extends React.ComponentPropsWithoutRef<typeof PopoverBase
   trigger?: PopoverTriggerType;
   children: React.ReactNode;
   open?: boolean;
+  delayDuration?: number;
 }
 
-const PopoverRoot: React.FC<PopoverProps> = ({ children, trigger = 'click', ...props }) => {
+const PopoverRoot: React.FC<PopoverProps> = ({
+  children,
+  trigger = 'click',
+  delayDuration = 0,
+  ...props
+}) => {
   const [isOpen, setIsOpen] = React.useState(props.open ?? false);
+  const timeoutRef = React.useRef<NodeJS.Timeout | null>(null);
 
   const handleMouseEnter = () => {
     if (trigger === 'hover') {
-      setIsOpen(true);
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+      timeoutRef.current = setTimeout(() => {
+        setIsOpen(true);
+      }, delayDuration);
     }
   };
 
   const handleMouseLeave = () => {
     if (trigger === 'hover') {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+        timeoutRef.current = null;
+      }
       setIsOpen(false);
     }
   };
 
+  React.useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+
   const content =
     trigger === 'hover' ? (
       <div className="relative" onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>