Generic component field.onChange/value shows type as PathValue<TFieldValues, TPath>

[tparvi]

Codesandbox: https://codesandbox.io/s/rhf-7-45-1-generic-sdx8hz

We have a generic components that use useController and you should only be able to use it with fields that are number. Everything else works except that the field.value, useWatch and field.onChange are not correctly typed. In reality I am not using useWatch to monitor the value but I wanted to see if the problem is there too.

As you can see in the following the types are incorrect. The type should be number but TS shows it is PathValue<TFieldValues, TPath>.

I think the problem is with UseControllerProps but I cannot figure out how do I change my component to let TS know that the value, onChange and useWatch all use number while keeping the constraint that component can only be used with fields of type number.

[araphiel-chwy]

Definitely worth exploration. I hope const generics can be used to sort this one out.

As things stand today, I'm keeping my RFH wrapper as generic as possible and using that as a base for a form specific component (pass your form typed control as a prop) to handle specific logic needs.