From d0835d5222c777356a80216ab31393643fc57ae6 Mon Sep 17 00:00:00 2001
From: Danny Avila <danny@librechat.ai>
Date: Sun, 28 Dec 2025 12:43:17 -0500
Subject: [PATCH] =?UTF-8?q?=F0=9F=91=90=20fix:=20Return=20Focus=20to=20MCP?=
 =?UTF-8?q?=20Edit=20Button=20after=20Dialog=20Closes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Added `editButtonRef` prop to `MCPCardActions` for improved focus management.
- Updated `MCPServerCard` to pass a reference to the edit button, enhancing accessibility.
- Modified `MCPServerDialog` to accept a more flexible `triggerRef` type, allowing for better integration with various button elements.
---
 .../components/SidePanel/MCPBuilder/MCPCardActions.tsx |  5 +++++
 .../components/SidePanel/MCPBuilder/MCPServerCard.tsx  | 10 +++-------
 .../SidePanel/MCPBuilder/MCPServerDialog/index.tsx     |  4 ++--
 3 files changed, 10 insertions(+), 9 deletions(-)

diff --git a/client/src/components/SidePanel/MCPBuilder/MCPCardActions.tsx b/client/src/components/SidePanel/MCPBuilder/MCPCardActions.tsx
index d92f08323a..015dfce014 100644
--- a/client/src/components/SidePanel/MCPBuilder/MCPCardActions.tsx
+++ b/client/src/components/SidePanel/MCPBuilder/MCPCardActions.tsx
@@ -1,3 +1,4 @@
+import React from 'react';
 import { Pencil, PlugZap, SlidersHorizontal, RefreshCw, X } from 'lucide-react';
 import { Spinner, TooltipAnchor } from '@librechat/client';
 import type { MCPServerStatus } from 'librechat-data-provider';
@@ -11,6 +12,7 @@ interface MCPCardActionsProps {
   canCancel: boolean;
   hasCustomUserVars: boolean;
   canEdit: boolean;
+  editButtonRef?: React.RefObject<HTMLDivElement>;
   onEditClick: (e: React.MouseEvent) => void;
   onConfigClick: (e: React.MouseEvent) => void;
   onInitialize: () => void;
@@ -34,6 +36,7 @@ export default function MCPCardActions({
   canCancel,
   hasCustomUserVars,
   canEdit,
+  editButtonRef,
   onEditClick,
   onConfigClick,
   onInitialize,
@@ -62,6 +65,7 @@ export default function MCPCardActions({
         {/* Edit button stays visible during loading */}
         {canEdit && (
           <TooltipAnchor
+            ref={editButtonRef}
             description={localize('com_ui_edit')}
             side="top"
             className={buttonBaseClass}
@@ -105,6 +109,7 @@ export default function MCPCardActions({
       {/* Edit button - opens MCPServerDialog to edit server definition */}
       {canEdit && (
         <TooltipAnchor
+          ref={editButtonRef}
           description={localize('com_ui_edit')}
           side="top"
           className={buttonBaseClass}
diff --git a/client/src/components/SidePanel/MCPBuilder/MCPServerCard.tsx b/client/src/components/SidePanel/MCPBuilder/MCPServerCard.tsx
index ee2810a1e2..34f98b34d3 100644
--- a/client/src/components/SidePanel/MCPBuilder/MCPServerCard.tsx
+++ b/client/src/components/SidePanel/MCPBuilder/MCPServerCard.tsx
@@ -29,9 +29,9 @@ export default function MCPServerCard({
   canCreateEditMCPs,
 }: MCPServerCardProps) {
   const localize = useLocalize();
+  const triggerRef = useRef<HTMLDivElement>(null);
   const { initializeServer } = useMCPServerManager();
   const [dialogOpen, setDialogOpen] = useState(false);
-  const triggerRef = useRef<HTMLButtonElement>(null);
 
   const statusIconProps = getServerStatusIconProps(server.serverName);
   const {
@@ -125,6 +125,7 @@ export default function MCPServerCard({
             canCancel={canCancel}
             hasCustomUserVars={hasCustomUserVars}
             canEdit={canEdit}
+            editButtonRef={triggerRef}
             onEditClick={handleEditClick}
             onConfigClick={onConfigClick}
             onInitialize={handleInitialize}
@@ -140,12 +141,7 @@ export default function MCPServerCard({
           onOpenChange={setDialogOpen}
           triggerRef={triggerRef}
           server={server}
-        >
-          {/* Hidden trigger for focus management */}
-          <button ref={triggerRef} className="sr-only" tabIndex={-1} aria-hidden="true">
-            {localize('com_ui_edit')} {displayName}
-          </button>
-        </MCPServerDialog>
+        />
       )}
     </>
   );
diff --git a/client/src/components/SidePanel/MCPBuilder/MCPServerDialog/index.tsx b/client/src/components/SidePanel/MCPBuilder/MCPServerDialog/index.tsx
index 048192df04..f86d3f8056 100644
--- a/client/src/components/SidePanel/MCPBuilder/MCPServerDialog/index.tsx
+++ b/client/src/components/SidePanel/MCPBuilder/MCPServerDialog/index.tsx
@@ -25,8 +25,8 @@ import MCPServerForm from './MCPServerForm';
 interface MCPServerDialogProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
-  children: React.ReactNode;
-  triggerRef?: React.MutableRefObject<HTMLButtonElement | null>;
+  children?: React.ReactNode;
+  triggerRef?: React.MutableRefObject<HTMLDivElement | HTMLButtonElement | null>;
   server?: MCPServerDefinition | null;
 }