how to use controller component in react-hook-form - reactjs

Question

I want to validate MuiPhoneInput using react hook form (v7.43.1).
The useForm looks like
const {
register,
handleSubmit,
formState: { errors },
control,
} = useForm();
The controller component looks like
<Controller
name="phone"
control={control}
render={({ field: { onChange, value } }) => (
<MuiPhoneInput
value={value}
onChange={onChange}
defaultCountry={"il"}
variant={"outlined"}
error={!!errors.phone}
helperText={errors?.phone?.message}
/>
)}
rules={{
required: "Phone is required",
}}
/>
But I can't write anything in the input. I tried with other textfields, but nothing works. How to solve this?

Answer 1

You're very close except your MuiPhoneInput is losing reference from the field destructure you're using to get value and onChange. There's an important ref that needs to be set contained inside field. Here's the official example of a Controller component handling a custom masked input.
Here's my working sandbox that demonstrates integrating material-ui-phone-material with react-hook-form.
Since you're setting defaultCountry={"il"} on the MUI component, also set the default value that resolves to inside defaultValues so react-hook-form knows about it.
Adds validation via isNotFilledTel() used inside rules>validate object.
Handling a React.StrictMode issue where ref.focus is undefined.
app.js
import { Controller, useForm } from "react-hook-form";
import MuiPhoneInput from "material-ui-phone-number";
export default function App() {
const {
handleSubmit,
formState: { errors },
control,
} = useForm({
reValidateMode: "onSubmit",
defaultValues: {
phone: "+972",
},
});
const isNotFilledTel = (v: string) => {
return v.length < 15 ? "Phone number is required." : undefined;
};
return (
<form onSubmit={handleSubmit((data) => console.log(data))}>
<Controller
name="phone"
control={control}
rules={{
required: "Phone is required",
validate: {
inputTelRequired: isNotFilledTel,
},
}}
render={({ field }) => {
return (
<MuiPhoneInput
{...field}
ref={(ref) => {
if (ref && !ref.focus) ref.focus = () => {};
}}
defaultCountry={"il"}
variant={"outlined"}
error={!!errors.phone}
helperText={<>{errors?.phone?.message}</>}
/>
);
}}
/>
{errors.phone && <p>Phone is required.</p>}
<button type="submit">Submit</button>
</form>
);
}