this issue is bothering me for past few days now. if anyone can help please share your answers. i would really appreciate.
I have created a reusable multi select autocomplete component which accepts options, width and label as props and render a multi select dropdown.
Issue: I am not able to display the selected values in the autocomplete text field. i am able to check the boxes but it is not changing any state. the onchange handler is not getting called.
/** props:
const options = [
{ id: 1, label: "Pseudoephedrine Hydrochloride", number: "11" },
{ id: 2, label: "Natural Medicine", number: "22" },
{ id: 3, label: "Bismuth subsalicylate", number: "89" },
{ id: 4, label: "tramadol hydrochloride", number: "67" },
{ id: 5, label: "Diltiazem Hydrochloride", number: "88" },
];**/
const AutoCompleteFilter = (props) => {
const { options, width, label } = props;
const [selectedValues, setSelectedValues] = React.useState([]);
const handleChange = (e, value) => {
console.log({ value });
setSelectedValues(value);
};
return (
<Autocomplete
multiple
id="multi-select-autocomplete"
options={options}
value={selectedValues}
onChange={handleChange}
sx={{ width: width }}
renderInput={(params) => (
<TextField {...params} label={label} variant="standard" />
)}
disableCloseOnSelect
renderTags={(e, v) => {
return (
e
.map((el) => el.label)
.join(",")
.slice(0, 5) + "..."
);
}}
getOptionLabel={(option) => option.label}
PopperComponent={PopperMy}
renderOption={(option, { selected }, state) => {
console.log({ state });
return (
<MenuItem key={option.id} value={option.id}>
<Checkbox checked={selected} />
<ListItemText primary={option.key} />
</MenuItem>
);
}}
/>
);
};
Please help