From ca3053f04d06a5d2d5d5bb5d80cbc9150d244a2b Mon Sep 17 00:00:00 2001
From: Finley Ge <32237950+FinleyGe@users.noreply.github.com>
Date: Mon, 20 Oct 2025 17:42:49 +0800
Subject: [PATCH] fix: resolve MCP service modal checkbox double-click event
 issue (#5790)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixed the issue where clicking on checkboxes in the MCP service modal
would trigger double-click events, causing selections to be immediately
deselected.

Root cause:
- Checkbox onChange events were conflicting with parent HStack onClick events
- Both components were trying to handle the same selection logic

Solution:
- Extracted handleItemClick function to avoid code duplication
- Flex onClick: only e.stopPropagation() to prevent event bubbling
- Checkbox onChange: handleItemClick for checkbox-specific interactions
- HStack onClick: handleItemClick for row-level interactions

Benefits:
✅ Checkbox clicks work properly without double-toggle
✅ Full row click functionality preserved
✅ All checkbox hover/focus effects maintained
✅ Clean DRY code structure with shared logic
✅ Perfect visual alignment between checkbox and avatar

Changes made to:
- projects/app/src/pageComponents/dashboard/mcp/EditModal.tsx:159-194

🤖 Generated with [Claude Code](https://claude.ai/code)
via [Happy](https://happy.engineering)

Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: Happy <yesreply@happy.engineering>
---
 .../dashboard/mcp/EditModal.tsx               | 47 +++++++++++--------
 1 file changed, 27 insertions(+), 20 deletions(-)

diff --git a/projects/app/src/pageComponents/dashboard/mcp/EditModal.tsx b/projects/app/src/pageComponents/dashboard/mcp/EditModal.tsx
index ef7411aa8..52fd9e52e 100644
--- a/projects/app/src/pageComponents/dashboard/mcp/EditModal.tsx
+++ b/projects/app/src/pageComponents/dashboard/mcp/EditModal.tsx
@@ -156,6 +156,25 @@ const SelectAppModal = ({
                 const selected = selectedList.some((app) => app.appId === item._id);
                 const isFolder = AppFolderTypeList.includes(item.type);
 
+                const handleItemClick = () => {
+                  if (isFolder) {
+                    setParentId(item._id);
+                  } else if (selected) {
+                    setSelectedList((state) => state.filter((app) => app.appId !== item._id));
+                  } else {
+                    setSelectedList((state) => [
+                      ...state,
+                      {
+                        appId: item._id,
+                        toolName: item.name,
+                        appName: item.name,
+                        avatar: item.avatar,
+                        description: item.intro
+                      }
+                    ]);
+                  }
+                };
+
                 return (
                   <HStack
                     key={item._id}
@@ -166,27 +185,15 @@ const SelectAppModal = ({
                     _hover={{
                       bg: 'myGray.100'
                     }}
-                    onClick={() => {
-                      if (isFolder) {
-                        setParentId(item._id);
-                      } else if (selected) {
-                        setSelectedList((state) => state.filter((app) => app.appId !== item._id));
-                      } else {
-                        setSelectedList((state) => [
-                          ...state,
-                          {
-                            appId: item._id,
-                            toolName: item.name,
-                            appName: item.name,
-                            avatar: item.avatar,
-                            description: item.intro
-                          }
-                        ]);
-                      }
-                    }}
+                    onClick={handleItemClick}
                   >
-                    <Flex alignItems={'center'} w={'1.25rem'}>
-                      {!isFolder && <Checkbox isChecked={selected} />}
+                    <Flex alignItems={'center'} w={'1.25rem'} onClick={(e) => e.stopPropagation()}>
+                      {!isFolder && (
+                        <Checkbox
+                          isChecked={selected}
+                          onChange={handleItemClick}
+                        />
+                      )}
                     </Flex>
                     <Avatar src={item.avatar} w="1.5rem" borderRadius={'sm'} />
                     <Box>{item.name}</Box>