From 15470221c229975ec75d239287d95bf922192075 Mon Sep 17 00:00:00 2001
From: dominik-zeglen <flesz3@o2.pl>
Date: Thu, 16 Jan 2020 13:40:22 +0100
Subject: [PATCH] Add click away

---
 src/components/Filter/Filter.tsx | 106 ++++++++++++++++---------------
 1 file changed, 55 insertions(+), 51 deletions(-)

diff --git a/src/components/Filter/Filter.tsx b/src/components/Filter/Filter.tsx
index 148f1175d..f3c1f96d1 100644
--- a/src/components/Filter/Filter.tsx
+++ b/src/components/Filter/Filter.tsx
@@ -1,4 +1,5 @@
 import ButtonBase from "@material-ui/core/ButtonBase";
+import ClickAwayListener from "@material-ui/core/ClickAwayListener";
 import Grow from "@material-ui/core/Grow";
 import Popper from "@material-ui/core/Popper";
 import { makeStyles } from "@material-ui/core/styles";
@@ -96,58 +97,61 @@ const Filter: React.FC<FilterProps> = props => {
   const isFilterActive = menu.some(filterElement => filterElement.active);
 
   return (
-    <div ref={anchor}>
-      <ButtonBase
-        className={classNames(classes.filterButton, classes.addFilterButton, {
-          [classes.addFilterButtonActive]: isFilterMenuOpened || isFilterActive
-        })}
-        onClick={() => setFilterMenuOpened(!isFilterMenuOpened)}
-      >
-        <Typography className={classes.addFilterText}>
-          <FormattedMessage defaultMessage="Filters" description="button" />
-        </Typography>
-        {isFilterActive && (
-          <>
-            <span className={classes.separator} />
-            <Typography className={classes.addFilterText}>
-              {menu.reduce(
-                (acc, filterElement) => acc + (filterElement.active ? 1 : 0),
-                0
-              )}
-            </Typography>
-          </>
-        )}
-      </ButtonBase>
-      <Popper
-        className={classes.popover}
-        open={isFilterMenuOpened}
-        anchorEl={anchor.current}
-        transition
-        disablePortal
-        placement="bottom-start"
-      >
-        {({ TransitionProps, placement }) => (
-          <Grow
-            {...TransitionProps}
-            style={{
-              transformOrigin:
-                placement === "bottom" ? "right top" : "right bottom"
-            }}
-          >
-            <FilterContent
-              currencySymbol={currencySymbol}
-              filters={data}
-              onClear={reset}
-              onFilterPropertyChange={dispatch}
-              onSubmit={() => {
-                onFilterAdd(data);
-                setFilterMenuOpened(false);
+    <ClickAwayListener onClickAway={() => setFilterMenuOpened(false)}>
+      <div ref={anchor}>
+        <ButtonBase
+          className={classNames(classes.filterButton, classes.addFilterButton, {
+            [classes.addFilterButtonActive]:
+              isFilterMenuOpened || isFilterActive
+          })}
+          onClick={() => setFilterMenuOpened(!isFilterMenuOpened)}
+        >
+          <Typography className={classes.addFilterText}>
+            <FormattedMessage defaultMessage="Filters" description="button" />
+          </Typography>
+          {isFilterActive && (
+            <>
+              <span className={classes.separator} />
+              <Typography className={classes.addFilterText}>
+                {menu.reduce(
+                  (acc, filterElement) => acc + (filterElement.active ? 1 : 0),
+                  0
+                )}
+              </Typography>
+            </>
+          )}
+        </ButtonBase>
+        <Popper
+          className={classes.popover}
+          open={isFilterMenuOpened}
+          anchorEl={anchor.current}
+          transition
+          disablePortal
+          placement="bottom-start"
+        >
+          {({ TransitionProps, placement }) => (
+            <Grow
+              {...TransitionProps}
+              style={{
+                transformOrigin:
+                  placement === "bottom" ? "right top" : "right bottom"
               }}
-            />
-          </Grow>
-        )}
-      </Popper>
-    </div>
+            >
+              <FilterContent
+                currencySymbol={currencySymbol}
+                filters={data}
+                onClear={reset}
+                onFilterPropertyChange={dispatch}
+                onSubmit={() => {
+                  onFilterAdd(data);
+                  setFilterMenuOpened(false);
+                }}
+              />
+            </Grow>
+          )}
+        </Popper>
+      </div>
+    </ClickAwayListener>
   );
 };
 Filter.displayName = "Filter";