Andreas/LibreChat
1
0
Fork 0
mirror of https://github.com/danny-avila/LibreChat.git synced 2026-01-20 09:16:13 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

🔎 fix: Focus Credential Inputs in Agent Tools (#11394)

Browse source 
* 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
This commit is contained in:
Dustin Healy 2026-01-19 09:02:24 -08:00 • committed by GitHub
parent 277fbd10cb
commit 9134471143
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 16 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

12
client/src/components/MCP/CustomUserVarsSection.tsx
View file

@ -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}
/>
);
})}

7
client/src/components/Plugins/Store/PluginAuthForm.tsx
View file

@ -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>