unselect item on outside click

src/components/caloriesList/CalorieRow.tsx

@@ -1,5 +1,5 @@
 import cx from 'classnames';
-import React, { MouseEventHandler } from 'react';
+import React, { MouseEvent } from 'react';
 import styles from './calorieRow.css';
 
 type CalorieRowProps = {
@@ -15,7 +15,10 @@ function CalorieRow (props: CalorieRowProps) {
     onRowClick = Function.prototype
   } = props;
 
-  const onClick = () => onRowClick(item);
+  const onClick = (event: MouseEvent) => {
+    event.stopPropagation();
+    onRowClick(item);
+  };
 
   return (
     <div className={cx(styles.calorieRow, {[styles.selected]: isSelected})} {...{onClick}}>

src/components/caloriesList/CaloriesList.tsx

@@ -103,7 +103,7 @@ function CaloriesList () {
       }}>
         {dayCalories.map(({date, items}) => {
           return (
-            <ItemList key={date} {...{items, selectedItem, onRowClick}} />
+            <ItemList key={date} {...{items, selectedItem, onRowClick, onClick: () => setSelectedItem() }} />
           );
         })}
       </ReactSwipe>