Pass ref as input ref and invalid as error

[keemor]

Hi @teandresmith,

Lately, I created CSB with examples of MUI & RHF

https://codesandbox.io/s/react-hook-form-mui-5-v7-controller-ts-10d64d?file=/src/form/InputField.tsx

I also discovered that ref should be passed as inputRef in order for RHF to focus the first field with the error.
Also, invalid prop can be passed as an error.

 <Controller
    render={({
      field: { ref, ...restField },
      fieldState: { invalid, error }
    }) => (
      <TextField
        inputRef={ref}
        {...restField}
        {...restProps}
        error={invalid}
        label={`${label ? `${label}${required ? "*" : ""}` : ""}`}

I can help with some PRs

Keep on good work 👌😃

[teandresmith]

Hey @keemor

Thanks for pointing out that ref should be passed as inputRef. I must have missed that note within the react-hook-form v6 to v7 migration notes.

Concerning passing in fieldState.invalid to error, I did notice that fairly recently that react-hook-form has marked it as depreciated. For reference see #8202 . It seems that it is intended that we use fieldState.error to check if there is any errors within the form.

I'll make the changes to inputRef and once again thanks for your help!