diff --git a/.changeset/smooth-dryers-yell.md b/.changeset/smooth-dryers-yell.md new file mode 100644 index 000000000000..94dd4f50cd4e --- /dev/null +++ b/.changeset/smooth-dryers-yell.md @@ -0,0 +1,5 @@ +--- +"@refinedev/react-hook-form": patch +--- + +fix(react-hook-form): properly warn unsaved changes only when there are actual changes (#6691) diff --git a/packages/react-hook-form/src/useForm/index.ts b/packages/react-hook-form/src/useForm/index.ts index 15163f7ea240..4c0f6e3fa462 100644 --- a/packages/react-hook-form/src/useForm/index.ts +++ b/packages/react-hook-form/src/useForm/index.ts @@ -128,6 +128,7 @@ export const useForm = < watch, setValue, getValues, + formState, handleSubmit: handleSubmitReactHookForm, setError, } = useHookFormResult; @@ -229,11 +230,11 @@ export const useForm = < return () => subscription.unsubscribe(); }, [watch]); - const onValuesChange = (changeValues: TVariables) => { - if (warnWhenUnsavedChanges) { - setWarnWhen(true); - } + useEffect(() => { + setWarnWhen(formState.isDirty && warnWhenUnsavedChanges); + }, [formState.isDirty, warnWhenUnsavedChanges]); + const onValuesChange = (changeValues: TVariables) => { if (refineCoreProps?.autoSave?.enabled) { setWarnWhen(false);