Currently, I am utilizing the MUI autocomplete feature in conjunction with react-hook-form. I have meticulously followed the guidance provided in this insightful response.
ControlledAutoComplete.jsx
import { Autocomplete, TextField } from "@mui/material";
import React from "react";
import { Controller } from "react-hook-form";
const ControlledAutoComplete = ({
options = [],
label,
renderInput,
getOptionLabel,
control,
defaultValue,
name,
errors,
}) => {
return (
<Controller
defaultValue={defaultValue}
name={name}
control={control}
render={({ field }) => (
<Autocomplete
options={options}
getOptionLabel={getOptionLabel}
defaultValue={defaultValue}
renderInput={(params) => (
<TextField
{...params}
label={label}
error={errors[name]}
helperText={errors[name] && errors[name].message}
onChange={(e, data) => field.onChange(data)}
/>
)}
{...field}
isOptionEqualToValue={(option, value) =>
value === undefined || value === "" || option.id === value.id
}
/>
)}
/>
);
};
export default ControlledAutoComplete;
AddFees.jsx
<ControlledAutoComplete
control={control}
name="enrollmentId"
options={[{ id: 1, firstName: "John"}, { id: 2, firstName: "Jen" }]}
getOptionLabel={(option) => `${option.firstName}`}
label="Select Students"
errors={errors}
defaultValue={""}
/>
I have encountered a warning message that states,
MUI: The inputted value for the Autocomplete component is deemed invalid. None of the selections align with
0. You can utilize theisOptionEqualToValueproperty to customize the comparison method.