🐞 update isDirty when setting disabled in register (#10805)

* add failing test

* updateTouchAndDirty in register

* fix vscode settings

---------

Co-authored-by: Selim Belhaouane <selim.belhaouane@garda.com>

.vscode/launch.json

@@ -8,8 +8,8 @@
       "internalConsoleOptions": "neverOpen",
       "disableOptimisticBPs": true,
       "cwd": "${workspaceFolder}",
-      "runtimeExecutable": "yarn",
-      "args": ["test", "--runInBand", "--watchAll=false"]
+      "runtimeExecutable": "pnpm",
+      "args": ["test", "--", "--runInBand", "--watchAll=false"]
     }
   ]
 }

.vscode/settings.json

@@ -3,7 +3,7 @@
     "source.fixAll.eslint": true
   },
   "typescript.tsdk": "node_modules/typescript/lib",
-  "jest.jestCommandLine": "yarn test",
+  "jest.jestCommandLine": "pnpm test --",
   "jest.autoRun": {
     "watch": false,
     "onSave": "test-file",

src/__tests__/useForm/formState.test.tsx

@@ -667,6 +667,38 @@ describe('formState', () => {
     expect(dirtyFieldsState).toEqual({});
   });
 
+  it('should recompute isDirty after toggling disabled', async () => {
+    let isDirty: null | boolean = null;
+
+    const App = () => {
+      const defaultValues = { name: 'initial', disableName: false };
+      const { formState, register, watch } = useForm({ defaultValues });
+
+      isDirty = formState.isDirty;
+
+      const disableName = watch('disableName', defaultValues.disableName);
+
+      return (
+        <form>
+          <input type="text" {...register('name', { disabled: disableName })} />
+          <input type="checkbox" {...register('disableName')} />
+        </form>
+      );
+    };
+
+    render(<App />);
+
+    const checkbox = screen.getByRole('checkbox');
+
+    fireEvent.click(checkbox);
+
+    expect(isDirty).toBe(true);
+
+    fireEvent.click(checkbox);
+
+    expect(isDirty).toBe(false);
+  });
+
   describe('when delay config is set', () => {
     const message = 'required.';
 

src/logic/createFormControl.ts

@@ -949,16 +949,17 @@ export function createFormControl<
     });
     _names.mount.add(name);
 
-    field
-      ? disabledIsDefined &&
-        set(
-          _formValues,
-          name,
-          options.disabled
-            ? undefined
-            : get(_formValues, name, getFieldValue(field._f)),
-        )
-      : updateValidAndValue(name, true, options.value);
+    if (field) {
+      if (disabledIsDefined) {
+        const value = options.disabled
+          ? undefined
+          : get(_formValues, name, getFieldValue(field._f));
+        set(_formValues, name, value);
+        updateTouchAndDirty(name, value, false, false, true);
+      }
+    } else {
+      updateValidAndValue(name, true, options.value);
+    }
 
     return {
       ...(disabledIsDefined ? { disabled: options.disabled } : {}),