From 9134471143cd883366f9b595e498a4a956ff071b Mon Sep 17 00:00:00 2001
From: Dustin Healy <54083382+dustinhealy@users.noreply.github.com>
Date: Mon, 19 Jan 2026 09:02:24 -0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=94=8E=20fix:=20Focus=20Credential=20Inpu?=
 =?UTF-8?q?ts=20in=20Agent=20Tools=20(#11394)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: focus transfer on add tool in Add Tools dialog

* fix: focus transfer to inputs on add mcp server in Add MCP Server Tools dialog

* chore: add comments disabling ESLint autfocus and documenting the purpose of the override

* chore: remove stray newline
---
 client/src/components/MCP/CustomUserVarsSection.tsx  | 12 ++++++++++--
 .../src/components/Plugins/Store/PluginAuthForm.tsx  |  7 ++++++-
 2 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/client/src/components/MCP/CustomUserVarsSection.tsx b/client/src/components/MCP/CustomUserVarsSection.tsx
index 987613e24c..339b78f6b9 100644
--- a/client/src/components/MCP/CustomUserVarsSection.tsx
+++ b/client/src/components/MCP/CustomUserVarsSection.tsx
@@ -23,9 +23,10 @@ interface AuthFieldProps {
   hasValue: boolean;
   control: any;
   errors: any;
+  autoFocus?: boolean;
 }
 
-function AuthField({ name, config, hasValue, control, errors }: AuthFieldProps) {
+function AuthField({ name, config, hasValue, control, errors, autoFocus }: AuthFieldProps) {
   const localize = useLocalize();
   const statusText = hasValue ? localize('com_ui_set') : localize('com_ui_unset');
 
@@ -85,6 +86,11 @@ function AuthField({ name, config, hasValue, control, errors }: AuthFieldProps)
           <Input
             id={name}
             type="text"
+            /* autoFocus is generally disabled due to the fact that it can disorient users,
+             * but in this case, the required field would logically be immediately navigated to anyways, and the component's
+             * functionality emulates that of a new modal opening, where users would expect focus to be shifted to the new content */
+            // eslint-disable-next-line jsx-a11y/no-autofocus
+            autoFocus={autoFocus}
             {...field}
             placeholder={
               hasValue
@@ -150,7 +156,7 @@ export default function CustomUserVarsSection({
   return (
     <div className="flex-1 space-y-4">
       <form onSubmit={handleSubmit(onFormSubmit)} className="space-y-4">
-        {Object.entries(fields).map(([key, config]) => {
+        {Object.entries(fields).map(([key, config], index) => {
           const hasValue = authValuesData?.authValueFlags?.[key] || false;
 
           return (
@@ -161,6 +167,8 @@ export default function CustomUserVarsSection({
               hasValue={hasValue}
               control={control}
               errors={errors}
+              // eslint-disable-next-line jsx-a11y/no-autofocus -- See AuthField autoFocus comment for more details
+              autoFocus={index === 0}
             />
           );
         })}
diff --git a/client/src/components/Plugins/Store/PluginAuthForm.tsx b/client/src/components/Plugins/Store/PluginAuthForm.tsx
index f6eec0a6af..5af1948c11 100644
--- a/client/src/components/Plugins/Store/PluginAuthForm.tsx
+++ b/client/src/components/Plugins/Store/PluginAuthForm.tsx
@@ -56,6 +56,11 @@ function PluginAuthForm({ plugin, onSubmit, isEntityTool }: TPluginAuthFormProps
                       aria-describedby={`${authField}-error`}
                       aria-label={config.label}
                       aria-required="true"
+                      /* autoFocus is generally disabled due to the fact that it can disorient users,
+                       * but in this case, the required field must be navigated to anyways, and the component's functionality
+                       * emulates that of a new modal opening, where users would expect focus to be shifted to the new content */
+                      // eslint-disable-next-line jsx-a11y/no-autofocus
+                      autoFocus={i === 0}
                       {...register(authField, {
                         required: `${config.label} is required.`,
                         minLength: {
@@ -70,7 +75,7 @@ function PluginAuthForm({ plugin, onSubmit, isEntityTool }: TPluginAuthFormProps
                 </HoverCard>
                 {errors[authField] && (
                   <span role="alert" className="mt-1 text-sm text-red-400">
-                    {errors?.[authField]?.message ?? ''}
+                    {String(errors?.[authField]?.message ?? '')}
                   </span>
                 )}
               </div>