From edd13e26f7f459ee5b08298ae1cd8dd0a2c2f3dc Mon Sep 17 00:00:00 2001
From: Mary Kate Fain <mk@marykatefain.com>
Date: Mon, 23 Feb 2026 12:07:53 -0600
Subject: [PATCH] Fix emoji picker closing when expanding to full picker

The popover's mouse-leave timeout was firing during the DOM transition
from the quick-select bar to the full emoji-mart picker, causing it to
close immediately. Added an expanded state flag that disables the
hover-to-close behavior when the full picker is shown.
---
 src/components/QuickReactMenu.tsx | 8 +++++++-
 src/components/ReactionButton.tsx | 8 ++++++++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/components/QuickReactMenu.tsx b/src/components/QuickReactMenu.tsx
index 974262ff..3f34d2ce 100644
--- a/src/components/QuickReactMenu.tsx
+++ b/src/components/QuickReactMenu.tsx
@@ -19,6 +19,8 @@ interface QuickReactMenuProps {
   eventKind: number;
   /** Called after an emoji is selected so the parent can close the popover. */
   onClose?: () => void;
+  /** Called when the full picker is opened/closed so the parent can lock the popover open. */
+  onExpandChange?: (expanded: boolean) => void;
   /** Optional extra class names. */
   className?: string;
 }
@@ -28,6 +30,7 @@ export function QuickReactMenu({
   eventPubkey,
   eventKind,
   onClose,
+  onExpandChange,
   className,
 }: QuickReactMenuProps) {
   const { user } = useCurrentUser();
@@ -145,7 +148,10 @@ export function QuickReactMenu({
 
       {/* More button to show full picker */}
       <button
-        onClick={() => setShowFullPicker(true)}
+        onClick={() => {
+          setShowFullPicker(true);
+          onExpandChange?.(true);
+        }}
         className="flex items-center justify-center size-9 rounded-full text-muted-foreground transition-all hover:bg-accent hover:text-foreground hover:scale-110 active:scale-95"
         title="More reactions"
       >
diff --git a/src/components/ReactionButton.tsx b/src/components/ReactionButton.tsx
index a0609b9d..fa0dee84 100644
--- a/src/components/ReactionButton.tsx
+++ b/src/components/ReactionButton.tsx
@@ -32,6 +32,7 @@ export function ReactionButton({
   const [menuOpen, setMenuOpen] = useState(false);
   const closeTimeoutRef = useRef<NodeJS.Timeout | null>(null);
   const justClosedRef = useRef(false);
+  const pickerExpandedRef = useRef(false);
   const userReaction = useUserReaction(eventId);
 
   const hasReacted = !!userReaction;
@@ -48,6 +49,8 @@ export function ReactionButton({
   }, [user]);
 
   const handleMouseLeave = useCallback(() => {
+    // Don't auto-close when the full emoji picker is open
+    if (pickerExpandedRef.current) return;
     // Delay closing to allow user to move to the menu
     closeTimeoutRef.current = setTimeout(() => {
       setMenuOpen(false);
@@ -57,6 +60,7 @@ export function ReactionButton({
   return (
     <Popover open={menuOpen} onOpenChange={(open) => {
       if (open && justClosedRef.current) return;
+      if (!open) pickerExpandedRef.current = false;
       setMenuOpen(open);
     }}>
       <PopoverTrigger asChild>
@@ -103,7 +107,11 @@ export function ReactionButton({
           eventId={eventId}
           eventPubkey={eventPubkey}
           eventKind={eventKind}
+          onExpandChange={(expanded) => {
+            pickerExpandedRef.current = expanded;
+          }}
           onClose={() => {
+            pickerExpandedRef.current = false;
             justClosedRef.current = true;
             setMenuOpen(false);
             setTimeout(() => {