Controller autocomplete is not displaying defaultValue, but dropdown options are still correct
Hello! I have the following code, and I'm trying to fill the autocomplete box with the current value of the row from supabase. It doesn't seem to be doing that and I am not sure why.
<Controller
control={control}
name={"category_id"}
rules={{ required: "This field is required" }}
defaultValue={questionData?.category_id.category_name}
render={({ field }) => (
<Autocomplete
{...categoryAutocompleteProps}
{...field}
defaultValue={questionData?.category_id}
onChange={(_, value) => {
field.onChange(value.id);
}}
getOptionLabel={(item) => {
const found = categoryAutocompleteProps?.options?.find((p) => {
const itemId =
typeof item === "object"
? item?.id?.toString()
: item?.toString();
const pId = p?.id?.toString();
return itemId === pId;
})
return found?.category_name;
}}
isOptionEqualToValue={(option, value) => {
const optionId = option?.id?.toString();
const valueId =
typeof value === "object"
? value?.id?.toString()
: value?.toString();
return value === undefined || optionId === valueId;
}}
renderInput={(params) => (
<TextField
{...params}
label={"Category:"}
margin="normal"
variant="outlined"
error={!!(errors as any)?.category_id?.id}
helperText={(errors as any)?.category_id?.id?.message}
required
/>
)}
/>
)}
/> <Controller
control={control}
name={"category_id"}
rules={{ required: "This field is required" }}
defaultValue={questionData?.category_id.category_name}
render={({ field }) => (
<Autocomplete
{...categoryAutocompleteProps}
{...field}
defaultValue={questionData?.category_id}
onChange={(_, value) => {
field.onChange(value.id);
}}
getOptionLabel={(item) => {
const found = categoryAutocompleteProps?.options?.find((p) => {
const itemId =
typeof item === "object"
? item?.id?.toString()
: item?.toString();
const pId = p?.id?.toString();
return itemId === pId;
})
return found?.category_name;
}}
isOptionEqualToValue={(option, value) => {
const optionId = option?.id?.toString();
const valueId =
typeof value === "object"
? value?.id?.toString()
: value?.toString();
return value === undefined || optionId === valueId;
}}
renderInput={(params) => (
<TextField
{...params}
label={"Category:"}
margin="normal"
variant="outlined"
error={!!(errors as any)?.category_id?.id}
helperText={(errors as any)?.category_id?.id?.message}
required
/>
)}
/>
)}
/>
