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

@@ -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) => {

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

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 ?? "",