scroll forms on invalid submit

Author: wenxi-onyx

web/src/app/admin/assistants/AssistantEditor.tsx

@@ -91,6 +91,7 @@ import { SEARCH_TOOL_ID } from "@/app/chat/components/tools/constants";
 import TextView from "@/components/chat/TextView";
 import { MinimalOnyxDocument } from "@/lib/search/interfaces";
 import { MAX_CHARACTERS_PERSONA_DESCRIPTION } from "@/lib/constants";
+import { FormErrorFocus } from "@/components/FormErrorHelpers";
 
 function findSearchTool(tools: ToolSnapshot[]) {
   return tools.find((tool) => tool.in_code_tool_id === SEARCH_TOOL_ID);
@@ -772,6 +773,7 @@ export function AssistantEditor({
                 />
               )}
               <Form className="w-full text-text-950 assistant-editor">
+                <FormErrorFocus />
                 {/* Refresh starter messages when name or description changes */}
                 <p className="text-base font-normal text-2xl">
                   {existingPersona ? (
@@ -1795,7 +1797,7 @@ export function AssistantEditor({
                       </Button>
                     )}
                   </div>
-                  <div className="flex gap-x-2">
+                  <div className="flex gap-x-4 items-center">
                     <Button
                       type="submit"
                       disabled={isSubmitting || isRequestSuccessful}

web/src/components/FormErrorHelpers.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { useFormikContext } from "formik";
+
+// After a submit with errors, scroll + focus the first invalid field
+export function FormErrorFocus() {
+  const { submitCount, errors, isSubmitting } = useFormikContext<any>();
+  const lastHandled = useRef(0);
+
+  useEffect(() => {
+    if (isSubmitting) return;
+    if (submitCount <= 0 || submitCount === lastHandled.current) return;
+
+    const keys = Object.keys(errors || {});
+    if (keys.length === 0) return;
+
+    const timer = setTimeout(() => {
+      try {
+        let target: HTMLElement | null = null;
+
+        // 1) Try by id, then data-testid
+        for (const key of keys) {
+          target =
+            (document.getElementById(key) as HTMLElement | null) ||
+            (document.querySelector(
+              `[data-testid="${key}"]`
+            ) as HTMLElement | null);
+          if (target) break;
+        }
+
+        // 2) Fallback: first element with matching name
+        if (!target) {
+          for (const key of keys) {
+            const byName = document.getElementsByName(key);
+            if (byName && byName.length > 0) {
+              target = byName[0] as HTMLElement;
+              break;
+            }
+          }
+        }
+
+        if (target) {
+          target.scrollIntoView({ behavior: "smooth", block: "center" });
+          if (typeof (target as any).focus === "function") {
+            (target as any).focus({ preventScroll: true });
+          }
+        }
+      } finally {
+        lastHandled.current = submitCount;
+      }
+    }, 0);
+
+    return () => clearTimeout(timer);
+  }, [submitCount, errors, isSubmitting]);
+
+  return null;
+}