From e1bc7360ad6eb4281b0adbeb93b2a1fa954e0f45 Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Wed, 5 Nov 2025 09:18:10 -0600
Subject: [PATCH] Form validation tweaks (#20812)

* Always show ID field when editing a trigger

* use onBlur method for form validation

this will prevent the trigger ID from expanding too soon when a user is typing the friendly name
---
 web/src/components/input/NameAndIdFields.tsx           | 4 +++-
 web/src/components/overlay/CreateTriggerDialog.tsx     | 1 +
 web/src/components/trigger/wizard/Step1NameAndType.tsx | 2 +-
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/web/src/components/input/NameAndIdFields.tsx b/web/src/components/input/NameAndIdFields.tsx
index 7b988edc7..c78a2917b 100644
--- a/web/src/components/input/NameAndIdFields.tsx
+++ b/web/src/components/input/NameAndIdFields.tsx
@@ -25,6 +25,7 @@ type NameAndIdFieldsProps<T extends FieldValues = FieldValues> = {
   processId?: (name: string) => string;
   placeholderName?: string;
   placeholderId?: string;
+  idVisible?: boolean;
 };
 
 export default function NameAndIdFields<T extends FieldValues = FieldValues>({
@@ -39,10 +40,11 @@ export default function NameAndIdFields<T extends FieldValues = FieldValues>({
   processId,
   placeholderName,
   placeholderId,
+  idVisible,
 }: NameAndIdFieldsProps<T>) {
   const { t } = useTranslation(["common"]);
   const { watch, setValue, trigger, formState } = useFormContext<T>();
-  const [isIdVisible, setIsIdVisible] = useState(false);
+  const [isIdVisible, setIsIdVisible] = useState(idVisible ?? false);
   const hasUserTypedRef = useRef(false);
 
   const defaultProcessId = (name: string) => {
diff --git a/web/src/components/overlay/CreateTriggerDialog.tsx b/web/src/components/overlay/CreateTriggerDialog.tsx
index fc6a28160..41fa61411 100644
--- a/web/src/components/overlay/CreateTriggerDialog.tsx
+++ b/web/src/components/overlay/CreateTriggerDialog.tsx
@@ -258,6 +258,7 @@ export default function CreateTriggerDialog({
               nameLabel={t("triggers.dialog.form.name.title")}
               nameDescription={t("triggers.dialog.form.name.description")}
               placeholderName={t("triggers.dialog.form.name.placeholder")}
+              idVisible={!!trigger}
             />
 
             <FormField
diff --git a/web/src/components/trigger/wizard/Step1NameAndType.tsx b/web/src/components/trigger/wizard/Step1NameAndType.tsx
index 265fba389..62e5ee962 100644
--- a/web/src/components/trigger/wizard/Step1NameAndType.tsx
+++ b/web/src/components/trigger/wizard/Step1NameAndType.tsx
@@ -101,7 +101,7 @@ export default function Step1NameAndType({
 
   const form = useForm<z.infer<typeof formSchema>>({
     resolver: zodResolver(formSchema),
-    mode: "onChange",
+    mode: "onBlur",
     defaultValues: {
       enabled: true,
       name: initialData?.name ?? trigger?.name ?? "",