I am trying to create a dropdown menu that allows users to delete items. However, when I click on the delete icon within a menu item, the entire menu item gets selected automatically. How can I prevent this default behavior? Here is my code:
{
dropdowns.categories && dropdowns.categories.map((data, index) => {
return <MenuItem
key={index}
className="d-flex justify-content-between"
style={{ width: "170px" }}
value={data}>
{data}
<IconButton
style={{ position: "absolute", right: "0px" }}
onClick={() => deleteItem(data, "categories")}
className="icon-button">
<i className="fa fa-trash"></i>
</IconButton>
</MenuItem>
})
}