how to handle event bubling in React

I want to create an onBlur event on the left panel such that it automatically closes when the user clicks the panel to the right. I tried using the onMouseLeave event but the closing animation is not smooth. I also wanted if they could click a button on the right panel it closes the left panel at the same time execute the button function which rules off the use of a click away listener.

all this works with the on blur but the problem is how do I stop the event from firing when I click its child component

left panel code

      const options = [
        {
           title: 'System Config',
           icon: Settings,
           list: [
             { name: 'General Settings', to: path },
             { name: 'Product Defaults', to: `${url}/pDefaults` },
             { name: 'Inventory Impects', to: `${url}/invImpects` },
           ],
        },{
          title: 'dashboard',
          icon: Dashboard,
          list: [{ name: 'Reports', to: `${url}/reports` }],
        },
      ];

       <Drawer onBlur={() => setOpen(false)}>
         <Box>
           <IconButton onClick={handleDrawer}>
            {!open ? <ChevronRightIcon /> : <ChevronLeftIcon />}
          </IconButton>
          <Divider />
       </Box>
       <List>{options.map((opt, i) =>(
         <ListItem button key={opt}>
           <NavLink activeClassName={classes.activeTab} to={opt.to}>
             <ListItemIcon className={classes.listItemIcon}>
               <Icon />
             </ListItemIcon>
             <ListItemText className={classes.listItemText} primary={opt.title} />
           </NavLink>
         </ListItem>
        ))}
       </List>
       </Drawer>

right panel code

     <Box className={classes.content}>
        <Switch>
          <Route exact path={path} component={GeneralSettings} />
          <Route path={`${path}/pDefaults`} component={ProductDefaults} />
        <Switch>
     </Box>

Via Active questions tagged javascript - Stack Overflow https://ift.tt/2FdjaAW