From 9024e2d38262b3d5ab1fa878317cdbbc1383d2a8 Mon Sep 17 00:00:00 2001
From: Chaiyapruek Muangsiri <cmp.poon@gmail.com>
Date: Mon, 18 Aug 2025 10:39:13 +0800
Subject: [PATCH] fix: emoji picker stuck in open state

---
 web-app/src/containers/dialogs/AddEditAssistant.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/web-app/src/containers/dialogs/AddEditAssistant.tsx b/web-app/src/containers/dialogs/AddEditAssistant.tsx
index aa7a215ba..daa49f908 100644
--- a/web-app/src/containers/dialogs/AddEditAssistant.tsx
+++ b/web-app/src/containers/dialogs/AddEditAssistant.tsx
@@ -61,14 +61,17 @@ export default function AddEditAssistant({
   const [paramsTypes, setParamsTypes] = useState<string[]>(['string'])
   const [showEmojiPicker, setShowEmojiPicker] = useState(false)
   const emojiPickerRef = useRef<HTMLDivElement>(null)
+  const emojiPickerTriggerRef = useRef<HTMLDivElement>(null)
   const [nameError, setNameError] = useState<string | null>(null)
 
-  // Handle click outside emoji picker
+  // Handle click outside emoji picker or trigger
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
       if (
         emojiPickerRef.current &&
-        !emojiPickerRef.current.contains(event.target as Node)
+        emojiPickerTriggerRef.current &&
+        !emojiPickerRef.current.contains(event.target as Node) &&
+        !emojiPickerTriggerRef.current.contains(event.target as Node)
       ) {
         setShowEmojiPicker(false)
       }
@@ -90,6 +93,7 @@ export default function AddEditAssistant({
       setName(initialData.name)
       setDescription(initialData.description)
       setInstructions(initialData.instructions)
+      setShowEmojiPicker(false)
       // Convert parameters object to arrays of keys and values
       const keys = Object.keys(initialData.parameters || {})
       const values = Object.values(initialData.parameters || {})
@@ -120,6 +124,7 @@ export default function AddEditAssistant({
     setParamsValues([''])
     setParamsTypes(['string'])
     setNameError(null)
+    setShowEmojiPicker(false)
   }
 
   const handleParameterChange = (
@@ -243,6 +248,7 @@ export default function AddEditAssistant({
               <div
                 className="border rounded-sm p-1 w-9 h-9 flex items-center justify-center border-main-view-fg/10 cursor-pointer"
                 onClick={() => setShowEmojiPicker(!showEmojiPicker)}
+                ref={emojiPickerTriggerRef}
               >
                 {avatar ? (
                   <AvatarEmoji