Unable to interact with button within a clickable div

Question

Unable to interact with button within a clickable div

Currently, I am encountering an issue with Chakra UI in React where the functionality of a Box component is being executed instead of a Button when clicked inside it. Despite trying to adjust the z-index, the problem persists.

Here's my code snippet:

<Box
   w="90%"
   h="auto"
   mt="10px"
   position="relative"
   key={index}
   borderWidth="1px"
   borderRadius="lg"
   onClick={() =>
   history.push(`/products/${item.cat_name}/${item.id}`)}
>
 <h1 className={styles.heading_bold}>{item.cat_name}</h1>
<Button position="absolute" top="3" right="3" zIndex="0"> //Button not able to click
 Options
</Button
</Box>

Check out this Codesandbox link for more details.

html css reactjs jsx chakra-ui

Answer 1

Answer №1

The correct attribute should be onClick instead of onclick.

   <Button
        onClick={() => console.log("button clicked")} // Typo fixed
        position="absolute"
        top="3"
        right="3"
        zIndex="0"
      >

For the CodeSandbox demo, visit: https://codesandbox.io/s/debuuge-lwio5

It's important to note that the Button is contained within the Box, so the Button's handler will be called first and then the Box's handler once the button is clicked.

To prevent event propagation, you can include the following code snippet.

  <Button
        onClick={(e) => {
          e.stopPropagation();
          console.log("button clicked");
        }}
        position="<absolute"
        top="3"
        right="3"
        zIndex="0"
      >

Now, when you click on the Button, only its handler will execute and you will see "button clicked" in the output.

Answer 2

The correct attribute should be onClick instead of onclick.

   <Button
        onClick={() => console.log("button clicked")} // Typo fixed
        position="absolute"
        top="3"
        right="3"
        zIndex="0"
      >

For the CodeSandbox demo, visit: https://codesandbox.io/s/debuuge-lwio5

It's important to note that the Button is contained within the Box, so the Button's handler will be called first and then the Box's handler once the button is clicked.

To prevent event propagation, you can include the following code snippet.

  <Button
        onClick={(e) => {
          e.stopPropagation();
          console.log("button clicked");
        }}
        position="<absolute"
        top="3"
        right="3"
        zIndex="0"
      >

Now, when you click on the Button, only its handler will execute and you will see "button clicked" in the output.

Unable to interact with button within a clickable div

Answer №1

Similar questions

Combining two forms into one PHP page, but intending to submit only a single form

Is it possible to enclose an image with two <div> tags in a single line?

Enhancing data entry by using a dropdown menu to update the record value without adding any undefined data elements

The error message encountered is "Uncaught (in promise) Error: Unable to access attributes of an undefined object (reading 'launch')."

Position text input boxes on the right side of the div element

Can you explain the functionality of the NextSibling method?

What is a way to utilize bindActionCreators in a class component without relying on the "connect" function?

What is the process for creating a duplicate element within the target div after the original element has been dropped?

How can I implement a SWR refresh from a button click in a child component using a callback function?

Is it possible to include a div above a centered image?

Create a typing effect in Javascript that mimics the user's input

Developing an international loading animation with the power of React and Redux

Utilizing Django to recycle an HTML block for multiple for loops within the same template

Updating the configuration settings for CKEditor 5 using Reactjs

React dependencies malfunctioning on Internet Explorer 11

Display secret content upon hovering with a stylish animation

Is there a way to automatically extend my content to fill the space on the page below the Material UI AppBar?

Arranging content in a horizontal row using div elements

Issue arises when the logo and navigation menu overlap upon zooming in

Is there a way to achieve a transparent background while animating the second text?