How to place an object above CardActionArea

Question

I'd like to know how to place an object above CardActionArea. As instance, if I have a button on top of CardActionArea and if I click on that button, both CardAction and Button action would execute at the same time. I'd like to make it so if I click on the button, it only executes the button action, while if clicking anywhere else on the card, it would execute CardAction.

Example: See the picture here

The whole card is clickable, however, when clicking, for example, the delete button (marked in the green circle), it would activate both CardAction and Button (delete) action.

<CardActionArea onClick={() => setConnectionVisible(true)}>
    <CardContent>
        <Grid container spacing={3}>
            { /* Other unimportant code */ }
            <Grid item xs={2} style={{ zIndex: 1000 }}>
                <Button isSecondary css={tw`mr-2`} onClick={() => setConnectionVisible(true)}>
                    <FontAwesomeIcon icon={faEye} fixedWidth/>
                </Button>
                <Can action={'database.delete'}>
                    <Button color={'red'} isSecondary onClick={() => setVisible(true)}>
                        <FontAwesomeIcon icon={faTrashAlt} fixedWidth/>
                    </Button>
                </Can>
            </Grid>
        </Grid>
    </CardContent>
</CardActionArea>

Thanks!

Answer 1

Regarding the actions. You just need to stop event propagation at the button handler. This will stop your CardActionArea onClick from being called. So take one of your button handlers:

 setConnectionVisible: function(e) {
    e.stopPropagation();

    // do connection stuff
  },

Apply the e.stopPropagation(); at the top of the event handler, this will pervent the onClick on the parent CardActionArea from being called.