From 44d79897f24ff66a1196d27c9bbbe43247bda8f4 Mon Sep 17 00:00:00 2001
From: dominik-zeglen <flesz3@o2.pl>
Date: Fri, 31 Jan 2020 16:20:14 +0100
Subject: [PATCH] Fix column picker errors

---
 src/components/ColumnPicker/ColumnPicker.tsx  | 55 +++++++++----------
 .../ColumnPicker/ColumnPickerContent.tsx      |  2 +
 2 files changed, 28 insertions(+), 29 deletions(-)

diff --git a/src/components/ColumnPicker/ColumnPicker.tsx b/src/components/ColumnPicker/ColumnPicker.tsx
index f2a1c9434..3dc2cf759 100644
--- a/src/components/ColumnPicker/ColumnPicker.tsx
+++ b/src/components/ColumnPicker/ColumnPicker.tsx
@@ -77,30 +77,27 @@ const ColumnPicker: React.FC<ColumnPickerProps> = props => {
   };
 
   return (
-    <div ref={anchor} className={className}>
-      <ColumnPickerButton
-        active={isExpanded}
-        onClick={() => setExpansionState(prevState => !prevState)}
-      />
-      <Popper
-        className={classes.popper}
-        open={isExpanded}
-        anchorEl={anchor.current}
-        transition
-        disablePortal
-        placement="bottom-end"
-      >
-        {({ TransitionProps, placement }) => (
-          <Grow
-            {...TransitionProps}
-            style={{
-              transformOrigin:
-                placement === "bottom" ? "right bottom" : "right top"
-            }}
-          >
-            <ClickAwayListener
-              onClickAway={() => setExpansionState(false)}
-              mouseEvent="onClick"
+    <ClickAwayListener onClickAway={() => setExpansionState(false)}>
+      <div ref={anchor} className={className}>
+        <ColumnPickerButton
+          active={isExpanded}
+          onClick={() => setExpansionState(prevState => !prevState)}
+        />
+        <Popper
+          className={classes.popper}
+          open={isExpanded}
+          anchorEl={anchor.current}
+          transition
+          disablePortal
+          placement="bottom-end"
+        >
+          {({ TransitionProps, placement }) => (
+            <Grow
+              {...TransitionProps}
+              style={{
+                transformOrigin:
+                  placement === "bottom" ? "right bottom" : "right top"
+              }}
             >
               <ColumnPickerContent
                 columns={columns}
@@ -114,11 +111,11 @@ const ColumnPicker: React.FC<ColumnPickerProps> = props => {
                 onReset={handleReset}
                 onSave={handleSave}
               />
-            </ClickAwayListener>
-          </Grow>
-        )}
-      </Popper>
-    </div>
+            </Grow>
+          )}
+        </Popper>
+      </div>
+    </ClickAwayListener>
   );
 };
 
diff --git a/src/components/ColumnPicker/ColumnPickerContent.tsx b/src/components/ColumnPicker/ColumnPickerContent.tsx
index 26eada3f1..971a57d3d 100644
--- a/src/components/ColumnPicker/ColumnPickerContent.tsx
+++ b/src/components/ColumnPicker/ColumnPickerContent.tsx
@@ -137,6 +137,7 @@ const ColumnPickerContent: React.FC<ColumnPickerContentProps> = props => {
                   name={column.value}
                   label={column.label}
                   onChange={() => onColumnToggle(column.value)}
+                  key={column.value}
                 />
               ))}
               {loading && (
@@ -160,6 +161,7 @@ const ColumnPickerContent: React.FC<ColumnPickerContentProps> = props => {
                 name={column.value}
                 label={column.label}
                 onChange={() => onColumnToggle(column.value)}
+                key={column.value}
               />
             ))}
           </div>