Clicking on components that are stacked on top of each

Question

Clicking on components that are stacked on top of each

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)

css reactjs react-native material-ui

Answer 1

Answer №1

To prevent event propagation, you can utilize the $event.stopPropagation(); method.

const firstFn = () => { // logic for the first function };
const secondFn = (event: MouseEventHandler<HTMLButtonElement>) => { 
    $event.stopPropagation();
    // logic for the second function
}

In your specific scenario, it is necessary to update the buttonAction function as follows:

const buttonAction = (event) => {
    $event.stopPropagation();
    console.log("Perform action!")
}

Additionally, modify the return statement with the following changes:

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($event)}>
                        <MoreVertIcon/>
                    </Button>
                }
            </Paper>
        </>
    )

For more information on this topic, refer to this resource

Answer 2

To prevent event propagation, you can utilize the $event.stopPropagation(); method.

const firstFn = () => { // logic for the first function };
const secondFn = (event: MouseEventHandler<HTMLButtonElement>) => { 
    $event.stopPropagation();
    // logic for the second function
}

In your specific scenario, it is necessary to update the buttonAction function as follows:

const buttonAction = (event) => {
    $event.stopPropagation();
    console.log("Perform action!")
}

Additionally, modify the return statement with the following changes:

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($event)}>
                        <MoreVertIcon/>
                    </Button>
                }
            </Paper>
        </>
    )

For more information on this topic, refer to this resource

Clicking on components that are stacked on top of each

Answer №1

Similar questions

Developing a React application build

Using React hooks and Typescript: I was expecting to see an assignment or function call, but instead, an expression was

How come Express GET requests always provide HTML as the response content type?

Adjust the background color of the header as you scroll

I'm having trouble getting my HTML <button> element to function correctly

Experiencing a dilemma with Watchman in React Native

How to Use CSS to Copy a Style Path and Conceal an Element within an iFrame

Using gradient colors for the background on the ::selection pseudo-element

What could be causing the discrepancy in sizes of the columns in my multi-column layout?

Is there a way to create an image gallery layout similar to Pinterest using CSS?

Is there a way to properly access and interpret a .log extension file within a React component?

Is it recommended to store all data (such as images, profile information, user details, etc.) in the redux-persist store while using react-redux

Tips for creating a dynamic variable for an object key in jQuery to streamline your code

Utilizing React Router with the power of useCallback

What is the best way to transfer information between two React.js files?

Prior to stacking the divs, separate the line within the div

Utilize Material UI Slider to show only the minimum and maximum markLabels on display

The React Router test commences outside of the home page

Attempting to alter the background image through the action of clicking on an image using jQuery, HTML, and CSS

Next.js Adsense Ad Units