How to handle events on the extra space in a flexbox?

Issue

How to handle the events when someone clicks(mouse click) on the violet color space around the elements ? Putting a general onclick on the container is overriding the individual item behaviors (they all have their internal onclick handlers). Any other way to solve this ?

Edit:

<Grid onClick={ClickHandler} container direction="row">
  <Grid item>
    // Filter Screen that has buttons, checkboxes
  </Grid>
  <Grid item>
    ............
  </Grid>
</Grid>

The problem here is the container ClickHandler just overrides all the clickhandlers that the filter screen has. So that tactic was not successful.

Solution

The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases. It does not, however, prevent any default behaviors from occurring; for instance, clicks on checkboxes are still processed.

<Grid onClick={ClickHandler} container direction="row">
  <Grid item onClick={(e) => e.stopPropagation()}>
    // Filter Screen that has buttons, checkboxes
  </Grid>
  <Grid item>
    ............
  </Grid>
</Grid>

Answered By - gavin