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,6 +77,7 @@ const ColumnPicker: React.FC<ColumnPickerProps> = props => {
   };
 
   return (
+    <ClickAwayListener onClickAway={() => setExpansionState(false)}>
       <div ref={anchor} className={className}>
         <ColumnPickerButton
           active={isExpanded}
@@ -97,10 +98,6 @@ const ColumnPicker: React.FC<ColumnPickerProps> = props => {
                 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>
           )}
         </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>