diff --git a/src/app/(dashboard)/dashboard/providers/[id]/components/modals/AddApiKeyModal.tsx b/src/app/(dashboard)/dashboard/providers/[id]/components/modals/AddApiKeyModal.tsx index f3e652425b..71dc8456f7 100644 --- a/src/app/(dashboard)/dashboard/providers/[id]/components/modals/AddApiKeyModal.tsx +++ b/src/app/(dashboard)/dashboard/providers/[id]/components/modals/AddApiKeyModal.tsx @@ -757,6 +757,12 @@ export default function AddApiKeyModal({ type="password" value={formData.apiKey} onChange={(e) => setFormData({ ...formData, apiKey: e.target.value })} + onKeyDown={(e) => { + if (e.key === "Enter" && !validating && !saving) { + e.preventDefault(); + handleValidate(); + } + }} className="flex-1" placeholder={apiCredentialPlaceholder} hint={apiCredentialHint} diff --git a/tests/unit/ui/add-api-key-modal-enter-key.test.ts b/tests/unit/ui/add-api-key-modal-enter-key.test.ts new file mode 100644 index 0000000000..2532eb297e --- /dev/null +++ b/tests/unit/ui/add-api-key-modal-enter-key.test.ts @@ -0,0 +1,26 @@ +import { describe, it } from "node:test"; +import assert from "node:assert/strict"; +import fs from "node:fs"; +import path from "node:path"; + +describe("AddApiKeyModal Enter key submit (#10995)", () => { + it("AddApiKeyModal attaches onKeyDown Enter handler to the API Key input", () => { + const modalPath = path.resolve( + process.cwd(), + "src/app/(dashboard)/dashboard/providers/[id]/components/modals/AddApiKeyModal.tsx" + ); + const content = fs.readFileSync(modalPath, "utf8"); + assert.ok( + content.includes("onKeyDown"), + "AddApiKeyModal must contain onKeyDown event handler for Enter key validation" + ); + assert.ok( + content.includes('e.key === "Enter"'), + "onKeyDown handler must check for Enter key press" + ); + assert.ok( + content.includes("handleValidate()"), + "Enter key press must invoke handleValidate()" + ); + }); +});