Controller changes checkbox behavior

[bolivier]

Version Number

7.51.4

Codesandbox/Expo snack

https://codesandbox.io/p/sandbox/rhf-bug-report-r96rcd

Steps to reproduce

Click the "value 2" checkbox on both forms and see that without the controller, the expected behavior occurs, and with the controller, something different happens.

Expected behaviour

I would expect that wrapping the checkbox in a controller would not change this behavior.

What browsers are you seeing the problem on?

No response

Relevant log output

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[bolivier]

I managed to fix my test cases with this, but it doesn't work with existing test cases.

diff --git a/src/useController.ts b/src/useController.ts
index 9f81698a..574be9aa 100644
--- a/src/useController.ts
+++ b/src/useController.ts
@@ -135,6 +135,7 @@ export function useController<
             target: {
               value: getEventValue(event),
               name: name as InternalFieldName,
+              type: event.target.type,
             },
             type: EVENTS.CHANGE,
           }),
@@ -155,13 +156,8 @@ export function useController<
         const field = get(control._fields, name);
 
         if (field && elm) {
-          field._f.ref = {
-            focus: () => elm.focus(),
-            select: () => elm.select(),
-            setCustomValidity: (message: string) =>
-              elm.setCustomValidity(message),
-            reportValidity: () => elm.reportValidity(),
-          };
+          field._f.ref = elm;
+          field._f.refs.push(elm);
         }
       },
     },

[bluebill1049]

what i would suggestion, build a radio component which host inputs inside and wrapped with Controller.