Anyone please can help? have been looking for solution all over with no luck:(
want to create a popupMenu that opens Dialog page, but should close menu item on click.
<IconButton {...bindTrigger(popupState)}>
<i className="fa-solid fa-ellipsis-vertical"></i>
</IconButton>
<Menu {...bindMenu(popupState)}>
<EditEventModal />
<DeleteEventConfirmation />
</Menu>
not closing
Related
I'm new to framework, I wanted to show menu item when we click on the icon, I couldn't able to figure it out where I'm going wrong.
here is the code:
<div>
<IconButton
aria-label="more"
aria-controls="simple-menu"
aria-haspopup="true"
onClick={this.handleClick}
>
<AccountBalanceIcon />
</IconButton>
<Menu
id="simple-menu"
anchorEl={this.state.anchorEl}
keepMounted
open={Boolean(this.state.anchorEl)}
onClose={this.handleClose}
>
<MenuItem onClick={this.handleClose}>Profile</MenuItem>
<MenuItem onClick={this.handleClose}>My account</MenuItem>
<MenuItem onClick={this.handleClose}>Logout</MenuItem>
</Menu>
</div>
Can anyone help me in getting a popup while I click on the icon
The IconButton does not have a value, so you're setting state to undefined. You just want the target anyway, since its the element itself that will serve as the anchor, not the value.
Change your handler to this:
handleClick = event => {
this.setState({ anchorEl: event.target });
};
Also: Please provide all the relevant code the the question itself. The event handlers are the most important part of the problem and they are only located off-site.
I have given Menu Items for an Icon but i couldn't able to see Icon while i click on the icon. It is getting hide due to Menu item. My Objective is to show icon even when we click on the icon(Drop down is shown) as shown in this link https://codesandbox.io/s/3rmgv. In the above link, we can we see a button, when we click on button, we could see the menu items as well as the button too. Can anyone help me in getting the in this way?
Here is the code:
<div>
<IconButton
aria-label="more"
aria-controls="simple-menu"
aria-haspopup="true"
onClick={this.handleClick}
>
<AccountBalanceIcon />
</IconButton>
<Menu
id="simple-menu"
anchorEl={this.state.anchorEl}
keepMounted
open={Boolean(this.state.anchorEl)}
onClose={this.handleClose}
>
<MenuItem onClick={this.handleClose}>Profile</MenuItem>
<MenuItem onClick={this.handleClose}>My account</MenuItem>
<MenuItem onClick={this.handleClose}>Logout</MenuItem>
</Menu>
</div>
Here is the sample code
Using antd for adding an dropdown menu.Its not closing on mouse leave and click of an item inside dropdown.it remains open in the same place when page is scrolled.
<Dropdown className="buy-dropdown" overlay={menu} placement="topLeft" trigger={["click"] >
<Button className="cxe-buy-game-btn" >
<img src="/static/images/cart-buy.svg" /> Buy
</Button>
</Dropdown>
It's because you have mentioned click as trigger. remove this prop so default will be hover or add hover
<Dropdown className="buy-dropdown" overlay={menu} placement="topLeft" trigger={["hover"] >
<Button className="cxe-buy-game-btn" >
<img src="/static/images/cart-buy.svg" /> Buy
</Button>
</Dropdown>
I have an accordion of MaterialUI where I also added few icons but on click of those two particular icons, I don't want the accordion to get expanded or collapsed. I want other onClick event to happen for the click but not expand or collapse. Here is the code I am using.
<ExpansionPanel>
<ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
<Typography className={classes.heading}>
{name}
</Typography>
<ListItem>
<ListItemText />
<IconButton color="primary" aria-label="Edit" onClick={onClickEdit}>
<Edit />
</IconButton>
<IconButton onClick={onClickDelete} color="secondary" aria-label="Delete">
<Delete />
</IconButton>
</ListItem>
</ExpansionPanelSummary>
For click of two icons, I don't want accordion to expand or collapse. Is this anyway related?
You could stop the event from bubbling up to the parent in your onClickDelete or onClickEdit function:
function onClickDelete(event) {
event.stopPropagation();
// Handle click here
}
Here's a rough example:
https://codesandbox.io/s/54vypx6k9n
Well, stopPropagation may create many interesting unexpected behaviors:
Like body click listeners will not be fired.
Besides, you need to restyle the accordion header inner content to make sure it takes the whole inner space to catch the click event
Why not a simpler way, pure CSS:
.MuiAccordionSummary-root {
pointer-events: none;
}
I've stacked with some strange issue. When I create a menu block with a button inside of it, I'm expecting to get a "Regular" button, but getting, kind of, Menu Item View.
Instead of
<Menu inverted>
<Menu.Menu>
<Menu.Item header>
<Image className="logo" src={logoImg} avatar />
</Menu.Item>
</Menu.Menu>
<Menu.Menu position={'right'}>
<Menu.Item>
<Button positive>Sign up</Button>
</Menu.Item>
</Menu.Menu>
</Menu>
What could be wrong?
Your code working fine. Here is the working codepen. Issue may be some other custom styles will override your component Button styles.