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
This commit is contained in:
Josh Hawkins 2025-11-05 09:18:10 -06:00 committed by GitHub
parent 4638c22c16
commit e1bc7360ad
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 5 additions and 2 deletions

View File

@ -25,6 +25,7 @@ type NameAndIdFieldsProps<T extends FieldValues = FieldValues> = {
processId?: (name: string) => string; processId?: (name: string) => string;
placeholderName?: string; placeholderName?: string;
placeholderId?: string; placeholderId?: string;
idVisible?: boolean;
}; };
export default function NameAndIdFields<T extends FieldValues = FieldValues>({ export default function NameAndIdFields<T extends FieldValues = FieldValues>({
@ -39,10 +40,11 @@ export default function NameAndIdFields<T extends FieldValues = FieldValues>({
processId, processId,
placeholderName, placeholderName,
placeholderId, placeholderId,
idVisible,
}: NameAndIdFieldsProps<T>) { }: NameAndIdFieldsProps<T>) {
const { t } = useTranslation(["common"]); const { t } = useTranslation(["common"]);
const { watch, setValue, trigger, formState } = useFormContext<T>(); const { watch, setValue, trigger, formState } = useFormContext<T>();
const [isIdVisible, setIsIdVisible] = useState(false); const [isIdVisible, setIsIdVisible] = useState(idVisible ?? false);
const hasUserTypedRef = useRef(false); const hasUserTypedRef = useRef(false);
const defaultProcessId = (name: string) => { const defaultProcessId = (name: string) => {

View File

@ -258,6 +258,7 @@ export default function CreateTriggerDialog({
nameLabel={t("triggers.dialog.form.name.title")} nameLabel={t("triggers.dialog.form.name.title")}
nameDescription={t("triggers.dialog.form.name.description")} nameDescription={t("triggers.dialog.form.name.description")}
placeholderName={t("triggers.dialog.form.name.placeholder")} placeholderName={t("triggers.dialog.form.name.placeholder")}
idVisible={!!trigger}
/> />
<FormField <FormField

View File

@ -101,7 +101,7 @@ export default function Step1NameAndType({
const form = useForm<z.infer<typeof formSchema>>({ const form = useForm<z.infer<typeof formSchema>>({
resolver: zodResolver(formSchema), resolver: zodResolver(formSchema),
mode: "onChange", mode: "onBlur",
defaultValues: { defaultValues: {
enabled: true, enabled: true,
name: initialData?.name ?? trigger?.name ?? "", name: initialData?.name ?? trigger?.name ?? "",