📮 fix(react-hook-form#11239): Set fields disabled state based on form…

… and field disabled (react-hook-form#11241)

* fix(react-hook-form#11239): Set fields disabled state based on form and field disabled prop

* fix(react-hook-form#11239): If-check and unit test

* Update createFormControl.ts

---------

Co-authored-by: Thomas De Bock <thomas.de.bock@persgroep.net>
Co-authored-by: Beier (Bill) <bluebill1049@hotmail.com>

app/src/app.tsx

@@ -40,6 +40,7 @@ import SetValueAsyncStrictMode from './setValueStrictMode';
 import { DelayError } from './delayError';
 import './style.css';
 import FormComponent from './form';
+import DisabledFields from "./disabledFields";
 
 const App: React.FC = () => {
   return (
@@ -117,6 +118,7 @@ const App: React.FC = () => {
         <Route path="/test" element={<Test />} />
         <Route path="/" element={<Welcome />} />
         <Route path="/form" element={<FormComponent />} />
+        <Route path="/disabled" element={<DisabledFields />} />
       </Routes>
     </BrowserRouter>
   );

app/src/disabledFields.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { useForm } from "react-hook-form";
+
+const toggle = (state: boolean) => !state;
+
+export default function DisabledFields() {
+    const [formDisabled, setFormDisabled] = React.useState(false);
+    const [firstDisabled, setFirstDisabled] = React.useState(false);
+    const [secondDisabled, setSecondDisabled] = React.useState(true);
+    const { register } = useForm({ disabled: formDisabled });
+
+    return (
+        <form>
+            <button type="button" onClick={() => setFormDisabled(toggle)}>Toggle form</button>
+            <button type="button" onClick={() => setFirstDisabled(toggle)}>Toggle Field 1</button>
+            <button type="button" onClick={() => setSecondDisabled(toggle)}>Toggle Field 2</button>
+
+            <input placeholder="Field 1" {...register('first', { disabled: firstDisabled }) } />
+            <input  placeholder="Field 2" {...register('second', { disabled: secondDisabled }) } />
+        </form>
+    )
+}

app/src/welcome/index.tsx

@@ -210,19 +210,24 @@ const items: Item[] = [
   },
   {
     title: 'WatchUseFieldArray',
-    description: 'should behaviour correctly when watching the field array',
+    description: 'Should behave correctly when watching the field array',
     slugs: ['/watch-field-array/normal', '/watch-field-array/default'],
   },
   {
     title: 'WatchUseFieldArrayNested',
-    description: 'should watch the correct nested field array',
+    description: 'Should watch the correct nested field array',
     slugs: ['/watchUseFieldArrayNested'],
   },
   {
     title: 'Form',
-    description: 'should validate form and submit the request',
+    description: 'Should validate form and submit the request',
     slugs: ['/form'],
   },
+  {
+    title: 'Disabled',
+    description: 'Should behave correctly when disabling form or fields',
+    slugs: ['/disabled'],
+  },
 ];
 
 const Component: React.FC = () => {

src/__tests__/useForm.test.tsx

@@ -2182,6 +2182,42 @@ describe('useForm', () => {
     expect(screen.getByTestId('controller')).not.toBeDisabled();
   });
 
+  it('should disable form inputs separately from its form', async () => {
+    function App() {
+      const { register } = useForm({
+        disabled: false,
+        defaultValues: {
+          lastName: '',
+          firstName: '',
+        },
+      });
+
+      return (
+        <form>
+          <input
+            {...register('firstName', { disabled: true })}
+            placeholder="firstName"
+          />
+          <input
+            {...register('lastName', { disabled: false })}
+            placeholder="lastName"
+          />
+        </form>
+      );
+    }
+
+    render(<App />);
+
+    await waitFor(() => {
+      expect(
+        (screen.getByPlaceholderText('firstName') as HTMLInputElement).disabled,
+      ).toBeTruthy();
+      expect(
+        (screen.getByPlaceholderText('lastName') as HTMLInputElement).disabled,
+      ).toBeFalsy();
+    });
+  });
+
   it('should be able to disable the entire form', async () => {
     const App = () => {
       const [disabled, setDisabled] = useState(false);

src/logic/createFormControl.ts

@@ -1085,8 +1085,14 @@ export function createFormControl<
       _subjects.state.next({ disabled });
       iterateFieldsByAction(
         _fields,
-        (ref) => {
-          ref.disabled = disabled;
+        (ref, name) => {
+          let requiredDisabledState = disabled;
+          const currentField = get(_fields, name);
+          if (currentField && isBoolean(currentField._f.disabled)) {
+            requiredDisabledState ||= currentField._f.disabled;
+          }
+
+          ref.disabled = requiredDisabledState;
         },
         0,
         false,