🐞 fix react-hook-form#11276 issue with disabled omit on Controller (r…

…eact-hook-form#11277)

src/__tests__/useController.test.tsx

@@ -1,11 +1,12 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 
 import { Controller } from '../controller';
 import { Control, FieldPath, FieldValues } from '../types';
 import { useController } from '../useController';
 import { useForm } from '../useForm';
 import { FormProvider, useFormContext } from '../useFormContext';
+import isBoolean from '../utils/isBoolean';
 
 describe('useController', () => {
   it('should render input correctly', () => {
@@ -875,4 +876,77 @@ describe('useController', () => {
       expect(callback).toBeCalled();
     });
   });
+
+  it('should not omit form value when disabled is not been presented', async () => {
+    const onSubmit = jest.fn();
+
+    const App = () => {
+      const { handleSubmit, control } = useForm({
+        defaultValues: {
+          test: 'test',
+        },
+      });
+      const [toggle, setToggle] = useState<boolean | undefined>(undefined);
+      const { field } = useController({
+        control,
+        name: 'test',
+        disabled: toggle,
+      });
+
+      return (
+        <form
+          onSubmit={handleSubmit((data) => {
+            onSubmit(data);
+          })}
+        >
+          <input {...field} />
+          <button>submit</button>
+          <button
+            type={'button'}
+            onClick={() => {
+              setToggle((value) => {
+                if (isBoolean(value)) {
+                  return false;
+                }
+
+                return !value;
+              });
+            }}
+          >
+            toggle
+          </button>
+        </form>
+      );
+    };
+
+    render(<App />);
+
+    fireEvent.click(screen.getByRole('button', { name: 'submit' }));
+
+    await waitFor(() =>
+      expect(onSubmit).toBeCalledWith({
+        test: 'test',
+      }),
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: 'toggle' }));
+
+    fireEvent.click(screen.getByRole('button', { name: 'submit' }));
+
+    await waitFor(() =>
+      expect(onSubmit).toBeCalledWith({
+        test: 'test',
+      }),
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: 'toggle' }));
+
+    fireEvent.click(screen.getByRole('button', { name: 'submit' }));
+
+    await waitFor(() =>
+      expect(onSubmit).toBeCalledWith({
+        test: undefined,
+      }),
+    );
+  });
 });

src/useController.ts

@@ -74,12 +74,10 @@ export function useController<
     control.register(name, {
       ...props.rules,
       value,
-      disabled: props.disabled,
+      ...(isBoolean(props.disabled) ? { disabled: props.disabled } : {}),
     }),
   );
 
-  _registerProps.current = control.register(name, props.rules);
-
   React.useEffect(() => {
     const _shouldUnregisterField =
       control._options.shouldUnregister || shouldUnregister;