use ref instead

web/src/components/input/NameAndIdFields.tsx

@@ -8,7 +8,7 @@ import {
   FormMessage,
 } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
-import { useState, useEffect } from "react";
+import { useState, useEffect, useRef } from "react";
 import { useFormContext } from "react-hook-form";
 import { generateFixedHash, isValidId } from "@/utils/stringUtil";
 import { useTranslation } from "react-i18next";
@@ -41,13 +41,9 @@ export default function NameAndIdFields<T extends FieldValues = FieldValues>({
   placeholderId,
 }: NameAndIdFieldsProps<T>) {
   const { t } = useTranslation(["common"]);
-  const {
-    watch,
-    setValue,
-    trigger,
-    formState: { errors },
-  } = useFormContext<T>();
+  const { watch, setValue, trigger, formState } = useFormContext<T>();
   const [isIdVisible, setIsIdVisible] = useState(false);
+  const hasUserTypedRef = useRef(false);
 
   const defaultProcessId = (name: string) => {
     const normalized = name.replace(/\s+/g, "_").toLowerCase();
@@ -63,33 +59,22 @@ export default function NameAndIdFields<T extends FieldValues = FieldValues>({
   useEffect(() => {
     const subscription = watch((value, { name }) => {
       if (name === nameField) {
+        hasUserTypedRef.current = true;
         const processedId = effectiveProcessId(value[nameField] || "");
-        setValue(idField, processedId as PathValue<T, Path<T>>, {
-          shouldValidate: false,
-        });
-        // Only trigger validation if nameField has no errors
-        if (!errors[nameField]) {
-          trigger(idField);
-        }
+        setValue(idField, processedId as PathValue<T, Path<T>>);
+        trigger(idField);
       }
     });
     return () => subscription.unsubscribe();
-  }, [
-    watch,
-    setValue,
-    trigger,
-    nameField,
-    idField,
-    effectiveProcessId,
-    errors,
-  ]);
+  }, [watch, setValue, trigger, nameField, idField, effectiveProcessId]);
 
-  const idError = errors[idField];
+  // Auto-expand if there's an error on the ID field after user has typed
   useEffect(() => {
-    if (idError) {
+    const idError = formState.errors[idField];
+    if (idError && hasUserTypedRef.current && !isIdVisible) {
       setIsIdVisible(true);
     }
-  }, [idError]);
+  }, [formState.errors, idField, isIdVisible]);
 
   return (
     <>