Fix/reset field rerender (#8017)

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

@@ -14,7 +14,10 @@ export interface $FormValues<Values extends Record<PropertyKey, any>> {
   initialize: (values: Values, onInitialize: () => void) => void;
   getValues: () => Values;
   getValuesSnapshot: () => Values;
-  resetField: (path: PropertyKey) => void;
+  resetField: (
+    path: PropertyKey,
+    subscribers?: (SetFieldValueSubscriber<Values> | null | undefined)[]
+  ) => void;
 }
 
 export interface SetValuesSubscriberPayload<Values> {
@@ -131,15 +134,16 @@ export function useFormValues<Values extends Record<PropertyKey, any>>({
   const getValuesSnapshot = useCallback(() => valuesSnapshot.current, []);
 
   const resetField = useCallback(
-    (path: PropertyKey) => {
+    (path: PropertyKey, subscribers?: (SetFieldValueSubscriber<Values> | null | undefined)[]) => {
       const snapshotValue = getPath(path, valuesSnapshot.current);
       if (typeof snapshotValue === 'undefined') {
         return;
       }
       setFieldValue({
         path,
         value: snapshotValue,
-        updateState: mode === 'uncontrolled' || undefined,
+        updateState: mode === 'controlled',
+        subscribers,
       });
     },
     [setFieldValue, mode]

packages/@mantine/form/src/stories/Form.rendering.story.tsx

@@ -1,3 +1,4 @@
+import { Button, TextInput } from '@mantine/core';
 import { useForm } from '../use-form';
 import { FormBase } from './_base';
 
@@ -20,3 +21,20 @@ export function Rendering() {
     </FormBase>
   );
 }
+
+export function UncontrolledResetField() {
+  const form = useForm({
+    mode: 'uncontrolled',
+    initialValues: {
+      foo: 'foo',
+    },
+  });
+
+  return (
+    <FormBase form={form}>
+      <TextInput {...form.getInputProps('foo')} key={form.key('foo')} />
+      <Button onClick={() => form.resetField('foo')}>Reset Field</Button>
+      <Button onClick={() => form.setFieldValue('foo', 'foo')}>Set Field</Button>
+    </FormBase>
+  );
+}

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

@@ -247,14 +247,28 @@ export function useForm<
     [rules]
   );
 
-  const key: Key<Values> = (path) =>
-    `${formKey}-${path as string}-${fieldKeys[path as string] || 0}`;
+  const key: Key<Values> = (path) => `${formKey}-${String(path)}-${fieldKeys[String(path)] || 0}`;
 
   const getInputNode: GetInputNode<Values> = useCallback(
     (path) => document.querySelector(`[data-path="${getDataPath(name, path)}"]`),
     []
   );
 
+  const resetField = useCallback(
+    (path: PropertyKey) => {
+      $values.resetField(path, [
+        mode !== 'controlled'
+          ? () =>
+              setFieldKeys((keys) => ({
+                ...keys,
+                [path as string]: (keys[path as string] || 0) + 1,
+              }))
+          : null,
+      ]);
+    },
+    [$values.resetField, mode, setFieldKeys]
+  );
+
   const form: UseFormReturnType<Values, TransformValues> = {
     watch: $watch.watch,
 
@@ -263,7 +277,7 @@ export function useForm<
     getValues: $values.getValues,
     getInitialValues: $values.getValuesSnapshot,
     setInitialValues: $values.setValuesSnapshot,
-    resetField: $values.resetField,
+    resetField,
     initialize,
     setValues,
     setFieldValue,