Component return contains below code in that Autocomplete which is wrapped inside Controller of react hook form. Validate function is written to validate Autocomplete field should not be blank object.
<form onSubmit={onSubmit}>
<Controller
control={control}
name="details"
rules={{
validate: (value) => {
if (
(value &&
Object.keys(value).length === 0 &&
Object.getPrototypeOf(value) === Object.prototype) ||
value === null
) {
return "Please Select Details";
}
},
}}
render={({ field: { onChange, value } }) => (
<Autocomplete
onChange={(e, options) => onChange(options)}
value={value?.email}
isOptionEqualToValue={(option, value) =>
option.email === value.email
}
options={
[{email: '[email protected]'}, {email: '[email protected]'}, {email: '[email protected]'}]
}
getOptionLabel={(option) => option.email || ""}
defaultValue={{email: '[email protected]'}}
renderInput={(params) => (
<TextField
{...params}
error={Boolean(errors?.details)}
helperText={errors?.details?.message}
/>
)}
/>
)}
/>
</form>
React hook form onSubmit:
const onSubmit = handleSubmit((data) => {
console.log(data)
}