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}>
-      <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>
   );
 };
 

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>