From 239a11855a3f0b35fc3143e43b3a87e42b444991 Mon Sep 17 00:00:00 2001
From: lyzno1 <yuanyouhuilyz@gmail.com>
Date: Sat, 11 Oct 2025 20:21:52 +0800
Subject: [PATCH] fix: prevent dropdown from closing when showing inline delete
 confirmation

Use pre-rendering strategy with CSS visibility control instead of conditional rendering to avoid race condition between React state update and PortalToFollowElem's click-outside detection.
---
 .../components/workflow/comment/thread.tsx    | 69 ++++++++++---------
 1 file changed, 35 insertions(+), 34 deletions(-)

diff --git a/web/app/components/workflow/comment/thread.tsx b/web/app/components/workflow/comment/thread.tsx
index f900d05e15..9c978abc4f 100644
--- a/web/app/components/workflow/comment/thread.tsx
+++ b/web/app/components/workflow/comment/thread.tsx
@@ -376,11 +376,10 @@ export const CommentThread: FC<CommentThreadProps> = memo(({
                         placement='bottom-end'
                         open={activeReplyMenuId === reply.id}
                         onOpenChange={(open) => {
-                          // Don't allow closing if we're showing delete confirm
-                          if (!open && deletingReplyId === reply.id)
-                            return
-                          if (!open)
+                          if (!open) {
+                            setDeletingReplyId(null)
                             setActiveReplyMenuId(null)
+                          }
                         }}
                       >
                         <div
@@ -409,7 +408,37 @@ export const CommentThread: FC<CommentThreadProps> = memo(({
                           className='z-[100] w-36 rounded-xl border border-components-panel-border bg-components-panel-bg-blur shadow-lg backdrop-blur-[10px]'
                           data-reply-menu
                         >
-                          {deletingReplyId === reply.id ? (
+                          {/* Menu buttons - hidden when showing delete confirm */}
+                          <div className={cn(deletingReplyId === reply.id ? 'hidden' : 'block')}>
+                            <button
+                              className='flex w-full items-center justify-start rounded-t-xl px-3 py-2 text-left text-sm text-text-secondary hover:bg-state-base-hover'
+                              onClick={(e) => {
+                                e.stopPropagation()
+                                handleStartEdit(reply)
+                              }}
+                            >
+                              {t('workflow.comments.actions.editReply')}
+                            </button>
+                            <button
+                              className='text-negative flex w-full items-center justify-start rounded-b-xl px-3 py-2 text-left text-sm text-text-secondary hover:bg-state-base-hover'
+                              onClick={(e) => {
+                                e.stopPropagation()
+                                e.preventDefault()
+                                if (onReplyDeleteDirect) {
+                                  setDeletingReplyId(reply.id)
+                                }
+                                else {
+                                  setActiveReplyMenuId(null)
+                                  onReplyDelete?.(reply.id)
+                                }
+                              }}
+                            >
+                              {t('workflow.comments.actions.deleteReply')}
+                            </button>
+                          </div>
+
+                          {/* Delete confirmation - shown when deletingReplyId matches */}
+                          <div className={cn(deletingReplyId === reply.id ? 'block' : 'hidden')}>
                             <InlineDeleteConfirm
                               title={t('workflow.comments.actions.deleteReply')}
                               onConfirm={() => {
@@ -419,38 +448,10 @@ export const CommentThread: FC<CommentThreadProps> = memo(({
                               }}
                               onCancel={() => {
                                 setDeletingReplyId(null)
-                                setActiveReplyMenuId(null)
                               }}
                               className='m-0 w-full border-0 shadow-none'
                             />
-                          ) : (
-                            <>
-                              <button
-                                className='flex w-full items-center justify-start rounded-t-xl px-3 py-2 text-left text-sm text-text-secondary hover:bg-state-base-hover'
-                                onClick={(e) => {
-                                  e.stopPropagation()
-                                  handleStartEdit(reply)
-                                }}
-                              >
-                                {t('workflow.comments.actions.editReply')}
-                              </button>
-                              <button
-                                className='text-negative flex w-full items-center justify-start rounded-b-xl px-3 py-2 text-left text-sm text-text-secondary hover:bg-state-base-hover'
-                                onClick={(e) => {
-                                  e.stopPropagation()
-                                  if (onReplyDeleteDirect) {
-                                    setDeletingReplyId(reply.id)
-                                  }
-                                  else {
-                                    setActiveReplyMenuId(null)
-                                    onReplyDelete?.(reply.id)
-                                  }
-                                }}
-                              >
-                                {t('workflow.comments.actions.deleteReply')}
-                              </button>
-                            </>
-                          )}
+                          </div>
                         </PortalToFollowElemContent>
                       </PortalToFollowElem>
                     )}