[@mantine/form] Add resetField method to form utilities

packages/@mantine/form/src/hooks/use-form-values/use-form-values.ts

@@ -3,17 +3,18 @@ import { getPath, setPath } from '../../paths';
 import { FormMode } from '../../types';
 
 export interface $FormValues<Values extends Record<PropertyKey, any>> {
-  initialized: React.MutableRefObject<boolean>;
+  initialized: React.RefObject<boolean>;
   stateValues: Values;
-  refValues: React.MutableRefObject<Values>;
-  valuesSnapshot: React.MutableRefObject<Values>;
+  refValues: React.RefObject<Values>;
+  valuesSnapshot: React.RefObject<Values>;
   setValues: (payload: SetValuesInput<Values>) => void;
   setFieldValue: (payload: SetFieldValueInput<Values>) => void;
   resetValues: () => void;
   setValuesSnapshot: (payload: Values) => void;
   initialize: (values: Values, onInitialize: () => void) => void;
   getValues: () => Values;
   getValuesSnapshot: () => Values;
+  resetField: (path: PropertyKey) => void;
 }
 
 export interface SetValuesSubscriberPayload<Values> {
@@ -67,7 +68,12 @@ export function useFormValues<Values extends Record<PropertyKey, any>>({
         ? { ...previousValues, ...resolvedValues }
         : (resolvedValues as Values);
       refValues.current = updatedValues;
-      updateState && setStateValues(updatedValues);
+      if (updateState) {
+        setStateValues(updatedValues);
+        if (mode === 'uncontrolled') {
+          refValues.current = updatedValues;
+        }
+      }
       onValuesChange?.(updatedValues, previousValues);
       subscribers
         ?.filter(Boolean)
@@ -124,6 +130,21 @@ export function useFormValues<Values extends Record<PropertyKey, any>>({
   const getValues = useCallback(() => refValues.current, []);
   const getValuesSnapshot = useCallback(() => valuesSnapshot.current, []);
 
+  const resetField = useCallback(
+    (path: PropertyKey) => {
+      const snapshotValue = getPath(path, valuesSnapshot.current);
+      if (typeof snapshotValue === 'undefined') {
+        return;
+      }
+      setFieldValue({
+        path,
+        value: snapshotValue,
+        updateState: mode === 'uncontrolled' || undefined,
+      });
+    },
+    [setFieldValue, mode]
+  );
+
   return {
     initialized,
     stateValues,
@@ -136,5 +157,6 @@ export function useFormValues<Values extends Record<PropertyKey, any>>({
     initialize,
     getValues,
     getValuesSnapshot,
+    resetField,
   };
 }

packages/@mantine/form/src/tests/use-form/resetField.test.ts

@@ -0,0 +1,33 @@
+import { act, renderHook } from '@testing-library/react';
+import { FormMode } from '../../types';
+import { useForm } from '../../use-form';
+
+function tests(mode: FormMode) {
+  it('should reset field', () => {
+    const hook = renderHook(() => useForm({ mode, initialValues: { a: 1, b: 2 } }));
+    expect(hook.result.current.values).toStrictEqual({ a: 1, b: 2 });
+
+    act(() => hook.result.current.setFieldValue('a', 10));
+    expect(hook.result.current.values).toStrictEqual({ a: 10, b: 2 });
+
+    act(() => hook.result.current.resetField('a'));
+    expect(hook.result.current.values).toStrictEqual({ a: 1, b: 2 });
+
+    act(() => hook.result.current.setFieldValue('b', 20));
+    expect(hook.result.current.values).toStrictEqual({ a: 1, b: 20 });
+
+    act(() => hook.result.current.resetField('b'));
+    expect(hook.result.current.values).toStrictEqual({ a: 1, b: 2 });
+
+    act(() => hook.result.current.resetField('c'));
+    expect(hook.result.current.values).toStrictEqual({ a: 1, b: 2 });
+  });
+}
+
+describe('@mantine/form/resetField-controlled', () => {
+  tests('controlled');
+});
+
+describe('@mantine/form/resetField-uncontrolled', () => {
+  tests('uncontrolled');
+});

packages/@mantine/form/src/types.ts

@@ -75,6 +75,7 @@ export interface GetInputPropsOptions {
   type?: GetInputPropsType;
   withError?: boolean;
   withFocus?: boolean;
+
   [key: string]: any;
 }
 
@@ -250,6 +251,7 @@ export interface UseFormReturnType<
   watch: Watch<Values>;
   key: Key<Values>;
   getInputNode: GetInputNode<Values>;
+  resetField: (path: PropertyKey) => void;
 }
 
 export type UseForm<

packages/@mantine/form/src/use-form.ts

@@ -258,10 +258,11 @@ export function useForm<
     watch: $watch.watch,
 
     initialized: $values.initialized.current,
-    values: $values.stateValues,
+    values: mode === 'uncontrolled' ? $values.refValues.current : $values.stateValues,
     getValues: $values.getValues,
     getInitialValues: $values.getValuesSnapshot,
     setInitialValues: $values.setValuesSnapshot,
+    resetField: $values.resetField,
     initialize,
     setValues,
     setFieldValue,