I am facing an issue with two React arrow function components stacked on top of each other using absolute positioning. Both components have onClick attributes, but I want only the one on top to be clickable. Is there a workaround for this?
Here is a simplified version of the code:
const Card = ({...}) => {
const styles = {
optionsButton: {
minWidth:0,
minHeight: 0,
padding: "2px",
position: "absolute",
color: "#808080",
zIndex: 1,
right: 5,
top: 5,
'&:hover':{
backgroundColor: 'rgb(0, 0, 0, 0.1)'
}
},
}
const [hovering, setHovering] = useState(false)
const [isCardExpanded, setIsCardExpanded] = useState(false)
const expandCard = () => {
setIsCardExpanded(true)
}
const closeCard = () => {
setIsCardExpanded(false)
}
const mainPaperStyle = () => {
let style = {
padding: "10px",
cursor: "pointer",
position: "absolute",
"&:hover": {
filter: "brightness(97%)"
}
}
//Extra code here modifying color of the style, no positioning modifications
return style
}
const buttonAction = () => {
console.log("Do action!")
}
return(
<>
<Paper sx={mainPaperStyle()} onClick={expandCard} onMouseEnter={() => setHovering(true)} onMouseLeave={() => setHovering(false)}>
Lorem Ipsum
{hovering &&
<Button variant="filled"
id="card-button"
sx={styles.optionsButton}
onClick={() => buttonAction()}>
<MoreVertIcon/>
</Button>
}
</Paper>
</>
)
}
Below are screenshots illustrating why I need two components stacked:
- Before hovering: https://i.stack.imgur.com/pi269.png
- After hovering: https://i.stack.imgur.com/yAzVK.png
When hovering over the Paper component, a Button should appear. However, the issue arises when clicking the button as both expandCard and buttonAction functions trigger simultaneously. (I am using Material UI by the way)