From 664a606bfb682913e599be38b32a33576f197be5 Mon Sep 17 00:00:00 2001
From: Jan Leon <Jan.gaschler@gmail.com>
Date: Sat, 30 May 2026 18:54:26 +0200
Subject: [PATCH] fix(dashboard/api-manager): scroll to key name error in
 create modal

---
 .../dashboard/api-manager/ApiManagerPageClient.tsx   | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/app/(dashboard)/dashboard/api-manager/ApiManagerPageClient.tsx b/src/app/(dashboard)/dashboard/api-manager/ApiManagerPageClient.tsx
index ea83c4890d..e58bffc5d6 100644
--- a/src/app/(dashboard)/dashboard/api-manager/ApiManagerPageClient.tsx
+++ b/src/app/(dashboard)/dashboard/api-manager/ApiManagerPageClient.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect, useMemo, useCallback, memo } from "react";
+import { useState, useEffect, useMemo, useCallback, memo, useRef } from "react";
 import { Card, Button, Input, Modal, CardSkeleton } from "@/shared/components";
 import { useCopyToClipboard } from "@/shared/hooks/useCopyToClipboard";
 import { useTranslations } from "next-intl";
@@ -154,6 +154,7 @@ export default function ApiManagerPageClient() {
   const [usageStats, setUsageStats] = useState<Record<string, KeyUsageStats>>({});
   const [sessionCounts, setSessionCounts] = useState<Record<string, number>>({});
   const [allowKeyReveal, setAllowKeyReveal] = useState(false);
+  const createKeyNameFieldRef = useRef<HTMLDivElement | null>(null);
 
   const [searchQuery, setSearchQuery] = useState("");
   const [activeOnly, setActiveOnly] = useState(false);
@@ -169,6 +170,13 @@ export default function ApiManagerPageClient() {
     fetchConnections();
   }, []);
 
+  useEffect(() => {
+    if (!showAddModal || !nameError) return;
+    requestAnimationFrame(() => {
+      createKeyNameFieldRef.current?.scrollIntoView({ block: "center", behavior: "instant" });
+    });
+  }, [nameError, showAddModal]);
+
   useEffect(() => {
     setActiveOnly(readActiveOnlyPreference());
   }, []);
@@ -1034,7 +1042,7 @@ export default function ApiManagerPageClient() {
         }}
       >
         <div className="flex flex-col gap-4">
-          <div>
+          <div ref={createKeyNameFieldRef}>
             <label className="text-sm font-medium text-text-main mb-1.5 block">
               {t("keyName")}
             </label>