I am using a select component from the MUI React library along with react-hook-form and controller. I have set a default value in the controller to use the reset function, but I am unable to change the value when a default value is set. Everything works as expected when there is no default value. Here is my code:
import * as React from "react";
import { useTheme } from "@mui/material/styles";
import OutlinedInput from "@mui/material/OutlinedInput";
import InputLabel from "@mui/material/InputLabel";
import MenuItem from "@mui/material/MenuItem";
import FormControl from "@mui/material/FormControl";
import Select from "@mui/material/Select";
import { useFormContext, Controller } from "react-hook-form";
import Box from '@mui/material/Box';
const ITEM_HEIGHT = 48;
const ITEM_PADDING_TOP = 8;
const MenuProps = {
PaperProps: {
style: {
maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
width: 250,
},
},
};
function getStyles(name, personName, theme) {
return {
fontWeight:
personName.indexOf(name) === -1
? theme.typography.fontWeightRegular
: theme.typography.fontWeightMedium,
};
}
function MySelect({ formname, name, reset, setSelected, data = [] }) {
const {
control,
formState: { errors },
setValue,
} = useFormContext();
let isError = false;
let errorMessage = "";
if (errors && errors.hasOwnProperty(name)) {
isError = true;
errorMessage = errors[name].message;
}
const handleChange = (event) => {
const {
target: { value },
} = event;
setSelected(
// On autofill we get a stringified value.
typeof value === "string" ? value.split(",") : value
);
};
return (
<Box sx={{minWidth: 120}}>
<InputLabel id="demo-multiple-name-label">{name}</InputLabel>
<Controller
name={formname}
style={{ width: 200 }}
control={control}
defaultValue=""
render={({ field: { onChange, value } }) => (
<Select
sx={{ width: 200 }}
labelId="demo-multiple-name-label"
id="demo-multiple-name"
multiple={false}
value={value}
onChange={onChange}
input={<OutlinedInput label={name} />}
MenuProps={MenuProps}
error={isError}
helperText={errorMessage}
>
{data.map((element, i) => {
if (element.bsa_maskenkey)
return (
<MenuItem value={element} key={i}>
{`${element.bsa_maskenkey} ${element.we_menge}`}
</MenuItem>
);
else if (element.blager_maskenkey)
return (
<MenuItem value={element} key={i}>
{`${element.blager_maskenkey} ${element.blagerpo_maskenkey} | Menge: ${element.summe}`}
</MenuItem>
);
else
return (
<MenuItem value={element} key={i}>
{`${element.objekt} | Menge: ${element.menge}`}
</MenuItem>
);
})}
</Select>
)}
/>
</Box>
);
}
export default React.memo(MySelect)