diff --git a/apps/dashboard/src/components/create-workflow-button.tsx b/apps/dashboard/src/components/create-workflow-button.tsx index 757ce353f37..1adebbae0d4 100644 --- a/apps/dashboard/src/components/create-workflow-button.tsx +++ b/apps/dashboard/src/components/create-workflow-button.tsx @@ -153,7 +153,15 @@ export const CreateWorkflowButton = (props: CreateWorkflowButtonProps) => { Add tags - tag.name)} {...field} value={field.value ?? []} /> + tag.name)} + {...field} + value={field.value ?? []} + onChange={(tags) => { + field.onChange(tags); + form.setValue('tags', tags, { shouldValidate: true }); + }} + /> diff --git a/apps/dashboard/src/components/workflow-editor/configure-workflow-form.tsx b/apps/dashboard/src/components/workflow-editor/configure-workflow-form.tsx index ffde3661e53..b5d59881eda 100644 --- a/apps/dashboard/src/components/workflow-editor/configure-workflow-form.tsx +++ b/apps/dashboard/src/components/workflow-editor/configure-workflow-form.tsx @@ -136,6 +136,7 @@ export const ConfigureWorkflowForm = (props: ConfigureWorkflowFormProps) => { form, isReadOnly, save: update, + shouldClientValidate: true, }); const onPauseWorkflow = (active: boolean) => { diff --git a/apps/dashboard/src/hooks/use-form-autosave.ts b/apps/dashboard/src/hooks/use-form-autosave.ts index d261b5159b1..957e485cb76 100644 --- a/apps/dashboard/src/hooks/use-form-autosave.ts +++ b/apps/dashboard/src/hooks/use-form-autosave.ts @@ -1,8 +1,8 @@ // useFormAutosave.ts -import { useCallback, useEffect } from 'react'; -import { UseFormReturn, FieldValues } from 'react-hook-form'; import { useDataRef } from '@/hooks/use-data-ref'; import { useDebounce } from '@/hooks/use-debounce'; +import { useCallback, useEffect } from 'react'; +import { FieldValues, UseFormReturn } from 'react-hook-form'; const TEN_SECONDS = 10 * 1000; @@ -10,11 +10,13 @@ export function useFormAutosave, T extends Fie previousData, form: propsForm, isReadOnly, + shouldClientValidate = false, save, }: { previousData: U; form: UseFormReturn; isReadOnly?: boolean; + shouldClientValidate?: boolean; save: (data: U) => void; }) { const formRef = useDataRef(propsForm); @@ -33,7 +35,10 @@ export function useFormAutosave, T extends Fie return; } // manually trigger the validation of the form - await form.trigger(); + const isValid = await form.trigger(); + if (!isValid && shouldClientValidate) { + return; + } const values = { ...previousData, ...data }; // reset the dirty fields right away because on slow networks the patch request might take a while @@ -42,7 +47,7 @@ export function useFormAutosave, T extends Fie form.reset(values, { keepErrors: true }); save(values); }, - [formRef, previousData, isReadOnly, save] + [formRef, previousData, isReadOnly, save, shouldClientValidate] ); const debouncedOnSave = useDebounce(onSave, TEN_SECONDS);