My menu consists of a single item, which is a text field along with a button. The idea is to input some information, save it by clicking the button, and then close the menu either by hitting "close" or the original button again. How can I stop the MenuItem from closing the menu when clicked on? Also, how do I enable the functionality to close the MenuItem using a button? Thank you!
function AppWindow() {
const [settingsState, setSettingsState] = useState(false);
const [anchorEl, setAnchorEl] = useState(null);
const open = Boolean(anchorEl);
const handleClick = (event) => {
setAnchorEl(event.currentTarget);
event.preventDefault();
if(settingsState === true){
console.log('true to false');
setSettingsState(false);
}
else if(settingsState === false){
console.log('false to true');
setSettingsState(true);
}
};
const handleClose = () => {
setAnchorEl(null);
};
return (
<Box className="App">
<Box className='AppContainer'>
<Paper className='Application' elevation={24} sx={{backgroundColor: '#023453'}}>
<Box sx={{margin: '1%'}}>
<Grid container>
<Grid item xs={11} sx={{color: '#d4e1ed'}}>
Name
</Grid>
<Grid item xs={1}>
<SettingsIcon onClick={handleClick}></SettingsIcon>
<Menu
id="basic-menu"
anchorEl={anchorEl}
open={open}
onClose={handleClose}
getContentAnchorEl={null}
anchorOrigin={{vertical: 'bottom', horizontal: ''}}
transformOrigin={{vertical: 'top', horizontal: 'right'}}
sx={{marginTop: '0.5%'}}
>
<MenuItem onClick={handleClose} sx={{}}><Settings /></MenuItem>
</Menu>
</Grid>
</Grid>