I have a button with an icon in it. It all looks good and I though everything worked properly but then I started getting undefined behaviors. It turns out that the onClick of the button e.target return either the button press, a polygon or an SVG. It depends if I click the corner of the button, then e.target is the button, if I click on the icon I either get a e.target polygon or svg. I only want to get the button. This is the code for generating the button:
<CButton
color="danger"
value={[name, name2, name3]}
onClick={handleUnlink}>
{<CIcon icon={cilX} />}
</CButton>
This is the code for onClick:
const handleUnlink = (e) => {
console.log(e.target)
};
How do I make sure that a user that accedently presses the CIcon inside the button is still only triggering a button press?
You can use the e.currentTarget property to make sure that a user that accedently presses the CIcon inside the button is still only triggering a button press.
Related
I have this 3 buttons here. So at first, the Continue button is disabled, because I want the user to click the Click Here button then only the Continue button can be clicked, where the disabled is then set to false.
Here's what I've tried:
let [clicked, setClicked] = useState(false);
let clickedLink = () => setClicked(() => true)
{
clicked ? <Button href={links[0]} target="_blank" style={buttonStyle2}>Continue</Button> : <Button href={links[0]} target="_blank" style={buttonStyle2} disabled>Continue</Button>
}
But then even after I clicked on the link, the button is still disabled because the clicked state is not updated. How do I constantly check the clicked state as what I did only check the first time when the components are loaded.
I suppose that the state change of the button (enabled or disabled) is causing the issue.
I have 5 action buttons (create, delete, edit, save and cancel).
All buttons start disabled except the Create button.
When I click the Create button, it becomes disabled and the Save and Cancel buttons become enabled. When it occours, the Save or Cancel tooltip pops up. Sometimes both of them pop up, sometimes only one of them pops up.
At the first time, I thought that it was happening in response to focus events. Then I try to disable the tooltip response to focus events setting disableTriggerFocus={true}, but it doesn't work.
Here's the code for ActionButton:
import Tooltip from "#material-ui/core/Tooltip";
const ActionButton = ({ buttonIcon, onClick, disabled, tooltip }) => {
return (
<>
<Tooltip
title={disabled ? "" : tooltip}
placement="top"
arrow
disableTriggerFocus={true}
>
<Button onClick={onClick} disabled={disabled}>
<ButtonIcon tag={buttonIcon} />
</Button>
</Tooltip>
</>
);
};
The triggering of the tooltip for hovering is based on the mouseOver and mouseLeave events. mouseOver events get triggered for disabled buttons, but mouseLeave events do not. When you hover over a disabled button it triggers opening the tooltip, but when you leave the disabled button the mouseLeave event is not triggered so the tooltip stays open.
You have code (title={disabled ? "" : tooltip}) that suppresses the tooltip text when it is disabled, but the tooltip still thinks it is "open". Then when you enable the button, the text of the tooltip is restored and immediately displays. So which buttons this occurs on depends on which disabled buttons you happened to hover over while they were disabled.
You can fix this by explicitly controlling the open state of the Tooltip using the open, onOpen, and onClose properties. onOpen fires when Tooltip thinks it should open and onClose fires when Tooltip thinks it should close, but you can combine this information with additional information (e.g. the disabled state) to decide on the value of the open property.
Below is a working version of ActionButton. The useEffect call is to handle the case where the tooltip is open as you click on the button. If the button is disabled by the click, then onClose won't fire when leaving the button since the mouseLeave event won't be triggered for the disabled button, so the effect handles closing the tooltip in that case.
import Tooltip from "#material-ui/core/Tooltip";
import { useState, useEffect } from "react";
const ActionButton = ({ buttonIcon, onClick, disabled, tooltip }) => {
const [open, setOpen] = useState(false);
useEffect(() => {
if (disabled && open) {
setOpen(false);
}
}, [disabled, open]);
return (
<>
<Tooltip
title={tooltip}
placement="top"
arrow
onOpen={() => {
if (!disabled) {
setOpen(true);
}
}}
onClose={() => setOpen(false)}
open={open}
>
<Button onClick={onClick} disabled={disabled}>
<ButtonIcon tag={buttonIcon} />
</Button>
</Tooltip>
</>
);
};
Related answers:
Programmatically open Tooltip in Material-UI
Is it possible to render a tooltip on a disabled Material-UI <Button> within a <ButtonGroup> without breaking the layout?
I am working with mapbox react gl - It is working pretty nice so far... except one thing.
The user can add their hometown location to the map. When the hometown location appears, it can be clicked to view a popup. I want the user to be able to remove the location from the map from inside the popup - So I added a function that removes the location from the database when a button is clicked. The problem is when the button is inside the popup the function doesn't fire - and I have no idea why.
I have messed with the z index of the button but it seems like whenever the button is clicked, the onClose function is being called instead of my handleDeleteHome function...
Edit* If I remove the onClose function, the handleDeleteHome function fires.
Any help is appriciated! Thanks!
{selectedHome && (
<Popup
latitude={bandLocation[0]}
longitude={bandLocation[1]}
onClose={() => {setSelectedHome(null)}}
offsetLeft={23}
offsetTop={-10}
>
<div>
<h4>Home Town</h4>
<Button
onClick={(e) => {
e.preventDefault()
handleDeleteHome()
}}
color="danger">x</Button>
</div>
</Popup>
)}
Alright! Figured it out - If anyone else needs to know:
You need to add closeOnClick={false} to the popup!
I have multiple button on the screen , I want that user either click this button to route to the new item or user could have close this , for that i have given the close icon within the button so that user can close that if they want , but when i am trying to give onclick function to the icon within the button it does not work
how could i do that ???
Here is the demo code
https://codesandbox.io/s/material-demo-rbkr8
try wrapping it with a div onClick like this?
const doSomething = () => {
alert('click here');
}
<div onClick={doSomething}>
<DeleteIcon className={classes.rightIcon} />
</div>
I am happy I can use font-awesome in my projects. I want to put some bars as my open/close button for my menu. The icon itself is not clickable, but the small area between the icon and the border still activates the onClick. The console.log I put in my event handler shows that the icon does not pass the 'name' property needed to activate the state change. Does anyone know how to get around this?
I have tried wrapping it in span and i elements. The icon does show up, but is just not activating the onClick, probably because it is not passing the 'name' property.
My event handler:
menuClick(event) {
/*event.preventDefault();*/
const name = event.target.name;
console.log(name);
this.setState({[name]:!this.state[name]})
}
My button:
<button
name="menuOpen"
style={props.data.menuOpen ?
buttonStyle :
null}
onClick={props.menuClick}
className="menuOpenButton">
<FontAwesomeIcon name="menuOpen" icon="bars" size="3x" />
</button>
and the props are being passed to the child like this:
<Header
data={this.state}
menuClick={this.menuClick} />
Changing the event handler to look for the currentTarget fixed it.
const name = event.currentTarget.name