Seeking assistance with modifying an autocomplete menu to include a dropdown for each item. Issue arises after trying to open the additional menu as it triggers an immediate closure of the autocomplete.
For reference, attached is an image showcasing the initial appearance of the autocomplete menu: autocomplete menu
Highlighted below is the problematic code snippet:
import "./styles.css";
import TextField from "@mui/material/TextField";
import Autocomplete from "@mui/material/Autocomplete";
import * as React from "react";
import Button from "@mui/material/Button";
import Menu from "@mui/material/Menu";
import MenuItem from "@mui/material/MenuItem";
const options = [
{ key: "1", value: "Option One" },
{ key: "2", value: "Option Two" }
];
function BasicMenu({ option }) {
const [anchorEl, setAnchorEl] = React.useState(null);
const open = Boolean(anchorEl);
const handleClick = (event) => {
event.stopPropagation();
setAnchorEl(event.currentTarget);
};
return (
<div>
<Button
color="success"
variant="contained"
id={`basic-button-${option.key}`}
aria-controls={open ? `basic-menu-${option.key}` : undefined}
aria-haspopup="true"
aria-expanded={open ? "true" : undefined}
onClick={handleClick}
>
open {option.value} menu
</Button>
<Menu
id={`basic-menu-${option.key`}
anchorEl={anchorEl}
open={open}
MenuListProps={{
"aria-labelledby": `basic-button-${option.key`
}}
>
<MenuItem>Do with {option.value}</MenuItem>
</Menu>
</div>
);
}
export default function App() {
return (
<div className="App">
<Autocomplete
onClose={(e, reason) => {
console.log(reason);
}}
getOptionLabel={({ value }) => value}
renderOption={(props, value) => (
<li {...props}>
{value.value}
<BasicMenu option={value} />
</li>
)}
disablePortal
id="combo-box-demo"
options={options}
renderInput={(params) => <TextField {...params} label="Option" />}
/>
</div>
);
}
Tried using event.stopPropagation(), along with assigning unique IDs to menus and buttons for potential resolution. The issue detected in the onClose function points out to blur.
Desired functionality involves maintaining the autocomplete open upon clicking the green button. Selecting an option within the dropdown should close normally. Closing upon clicking outside the autocomplete area should also remain unaffected.