fix: emoji picker stuck in open state

This commit is contained in:
Chaiyapruek Muangsiri 2025-08-18 10:39:13 +08:00
parent 83b53210ee
commit 9024e2d382

View File

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