Merge pull request #393 from mirumee/fix/column-picker

Fix column picker errors

CHANGELOG.md

@@ -30,6 +30,7 @@ All notable, unreleased changes to this project will be documented in this file.
 - Do not render password change if authenticating - #378 by @dominik-zeglen
 - Fix crash when one product is selected - #391 by @dominik-zeglen
 - Improve product update form error handling - #392 by @dominik-zeglen
+- Fix column picker errors - #393 by @dominik-zeglen
 
 ## 2.0.0
 

src/components/ColumnPicker/ColumnPicker.tsx

@@ -77,30 +77,27 @@ const ColumnPicker: React.FC<ColumnPickerProps> = props => {
   };
 
   return (
-    <div ref={anchor} className={className}>
+    <ClickAwayListener onClickAway={() => setExpansionState(false)}>
-      <ColumnPickerButton
+      <div ref={anchor} className={className}>
-        active={isExpanded}
+        <ColumnPickerButton
-        onClick={() => setExpansionState(prevState => !prevState)}
+          active={isExpanded}
-      />
+          onClick={() => setExpansionState(prevState => !prevState)}
-      <Popper
+        />
-        className={classes.popper}
+        <Popper
-        open={isExpanded}
+          className={classes.popper}
-        anchorEl={anchor.current}
+          open={isExpanded}
-        transition
+          anchorEl={anchor.current}
-        disablePortal
+          transition
-        placement="bottom-end"
+          disablePortal
-      >
+          placement="bottom-end"
-        {({ TransitionProps, placement }) => (
+        >
-          <Grow
+          {({ TransitionProps, placement }) => (
-            {...TransitionProps}
+            <Grow
-            style={{
+              {...TransitionProps}
-              transformOrigin:
+              style={{
-                placement === "bottom" ? "right bottom" : "right top"
+                transformOrigin:
-            }}
+                  placement === "bottom" ? "right bottom" : "right top"
-          >
+              }}
-            <ClickAwayListener
-              onClickAway={() => setExpansionState(false)}
-              mouseEvent="onClick"
             >
               <ColumnPickerContent
                 columns={columns}
@@ -114,11 +111,11 @@ const ColumnPicker: React.FC<ColumnPickerProps> = props => {
                 onReset={handleReset}
                 onSave={handleSave}
               />
-            </ClickAwayListener>
+            </Grow>
-          </Grow>
+          )}
-        )}
+        </Popper>
-      </Popper>
+      </div>
-    </div>
+    </ClickAwayListener>
   );
 };
 

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>