Function component refs issue & React Number Format

[mrprst]

Hello everyone,

I am using React Hook Form 7.45.0 with an external controller component called React Number Format. Unfortunately, I'm struggling with an issue for a while and regardless of any solution I found on the internet, I'm still having this dev issue
Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?
I've tried to use the useref props of React Number Format to match with the ref given by the Controller nothing changes.

A snippet of my code is available here with the current issue running : https://codesandbox.io/s/cranky-sunset-dvzms6?file=/src/App.tsx

This is driving me nuts aha

Thank you for your insights !
Mathias

[Moshyfawn]

You're mixing both controlled and uncontrolled input APIs: Controller and register respectively. The ref warning you see is due to the fact that you are spreading the return values of the register function into the Controller component, which is an RHF controlled input component and doesn't need to be registered.

 <Controller
   control={control}
+  name="zipcode"
+  rules={{
+     required: "À renseigner",
+     min: 5,
+     maxLength: 5
+  }}
-  render={({ field: { onChange, value, ref } }) => (
+  render={({ field: { name, onChange, onBlur, value, ref } }) => (
     <PatternFormat
       getInputRef={ref}
+      value={value}
+      onBlur={onBlur}
+      name={name}
+      onValueChange={(value, sourceInfo) => {
+        onChange(value);
+      }
       format="#####"
       placeholder="75007"
       id="zipcode"
     />
   )}
-  {...register("zipcode", {
-    required: "À renseigner",
-    min: 5,
-    maxLength: 5
-  })}
 />

[mrprst]

Yep, i've just read it in the documentation ... Thank you for your kind and fast reply sir ! It has made the error go away.

[Moshyfawn]

Awesome, I'm glad I could help!