[@mantine/form] Fix onValuesChange not using updated function (#5901)

mantinedev · Mar 12, 2024 · 52e8469 · 52e8469
1 parent 08b0f53
commit 52e8469
Showing 1 changed file with 38 additions and 32 deletions.
diff --git a/packages/@mantine/form/src/use-form.ts b/packages/@mantine/form/src/use-form.ts
@@ -128,42 +128,48 @@ export function useForm<
     []
   );
 
-  const setFieldValue: SetFieldValue<Values> = useCallback((path, payload) => {
-    const shouldValidate = shouldValidateOnChange(path, validateInputOnChange);
-    clearFieldDirty(path);
-    setTouched((currentTouched) => ({ ...currentTouched, [path]: true }));
-    _setValues((current) => {
-      const currentValue = getPath(path, current) as PathValue<Values, typeof path>;
-      const result = setPath(
-        path,
-        payload instanceof Function ? payload(currentValue) : payload,
-        current
-      );
-
-      if (shouldValidate) {
-        const validationResults = validateFieldValue(path, rules, result);
-        validationResults.hasError
-          ? setFieldError(path, validationResults.error)
-          : clearFieldError(path);
-      }
+  const setFieldValue: SetFieldValue<Values> = useCallback(
+    (path, payload) => {
+      const shouldValidate = shouldValidateOnChange(path, validateInputOnChange);
+      clearFieldDirty(path);
+      setTouched((currentTouched) => ({ ...currentTouched, [path]: true }));
+      _setValues((current) => {
+        const currentValue = getPath(path, current) as PathValue<Values, typeof path>;
+        const result = setPath(
+          path,
+          payload instanceof Function ? payload(currentValue) : payload,
+          current
+        );
+
+        if (shouldValidate) {
+          const validationResults = validateFieldValue(path, rules, result);
+          validationResults.hasError
+            ? setFieldError(path, validationResults.error)
+            : clearFieldError(path);
+        }
 
-      onValuesChange?.(result, current);
+        onValuesChange?.(result, current);
 
-      return result;
-    });
+        return result;
+      });
 
-    !shouldValidate && clearInputErrorOnChange && setFieldError(path, null);
-  }, []);
+      !shouldValidate && clearInputErrorOnChange && setFieldError(path, null);
+    },
+    [onValuesChange]
+  );
 
-  const setValues: SetValues<Values> = useCallback((payload) => {
-    _setValues((currentValues) => {
-      const valuesPartial = payload instanceof Function ? payload(currentValues) : payload;
-      const result = { ...currentValues, ...valuesPartial };
-      onValuesChange?.(result, currentValues);
-      return result;
-    });
-    clearInputErrorOnChange && clearErrors();
-  }, []);
+  const setValues: SetValues<Values> = useCallback(
+    (payload) => {
+      _setValues((currentValues) => {
+        const valuesPartial = payload instanceof Function ? payload(currentValues) : payload;
+        const result = { ...currentValues, ...valuesPartial };
+        onValuesChange?.(result, currentValues);
+        return result;
+      });
+      clearInputErrorOnChange && clearErrors();
+    },
+    [onValuesChange]
+  );
 
   const reorderListItem: ReorderListItem<Values> = useCallback((path, payload) => {
     clearFieldDirty(path);