Make all Header's provider clickable

src/components/Header/component/Layout.jsx

@@ -44,7 +44,7 @@ const styles = () => ({
 })
 
 const Layout = openHoc(({
-  open, toggle, classes, providerInfo, providerDetails,
+  open, toggle, clickAway, classes, providerInfo, providerDetails,
 }: Props) => (
   <React.Fragment>
     <Row className={classes.summary}>
@@ -61,7 +61,7 @@ const Layout = openHoc(({
               <Grow
                 {...TransitionProps}
               >
-                <ClickAwayListener onClickAway={toggle}>
+                <ClickAwayListener onClickAway={clickAway} mouseEvent="onClick" touchEvent={false}>
                   <List className={classes.root} component="div">
                     {providerDetails}
                   </List>

src/components/Header/component/Provider.jsx

@@ -54,10 +54,9 @@ class Provider extends React.Component<Props> {
     return (
       <React.Fragment>
         <div ref={this.myRef} className={classes.root}>
-          <Col end="sm" middle="xs" className={classes.provider}>
+          <Col end="sm" middle="xs" className={classes.provider} onClick={toggle}>
             { info }
             <IconButton
-              onClick={toggle}
               disableRipple
               className={classes.expand}
             >

src/components/hoc/OpenHoc.jsx

@@ -4,9 +4,13 @@ import { withStateHandlers } from 'recompose'
 export type Open = {
   open: boolean,
   toggle: () => void,
+  clickAway: () => void,
 }
 
 export default withStateHandlers(
   () => ({ open: false }),
-  { toggle: ({ open }) => () => ({ open: !open }) },
+  {
+    toggle: ({ open }) => () => ({ open: !open }),
+    clickAway: () => () => ({ open: false }),
+  },
 )