Merge branch 'master' into ref/use-eslint

CHANGELOG.md

@@ -16,6 +16,7 @@ All notable, unreleased changes to this project will be documented in this file.
 - Add navigator - #267 by @dominik-zeglen
 - Fix voucher limit - #271 by @dominik-zeglen
 - Allow multiple images to be uploaded - #277 by @dominik-zeglen
+- Fix dropdown clickable areas - #281 by @dominik-zeglen
 - Use eslint - #285 by @dominik-zeglen
 
 ## 2.0.0

src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectFieldContent.tsx

@@ -70,7 +70,8 @@ const useStyles = makeStyles(
       padding: 8
     },
     hide: {
-      opacity: 0
+      opacity: 0,
+      zIndex: -1
     },
     hr: {
       margin: theme.spacing(1, 0)
@@ -275,17 +276,19 @@ const MultiAutocompleteSelectFieldContent: React.FC<
           </MenuItem>
         )}
       </div>
-      <div className={classes.arrowContainer}>
+      {choices.length > maxMenuItems && (
-        <div
+        <div className={classes.arrowContainer}>
-          className={classNames(classes.arrowInnerContainer, {
+          <div
-            // Needs to be explicitely compared to false because
+            className={classNames(classes.arrowInnerContainer, {
-            // scrolledToBottom can be either true, false or undefined
+              // Needs to be explicitely compared to false because
-            [classes.hide]: scrolledToBottom !== false
+              // scrolledToBottom can be either true, false or undefined
-          })}
+              [classes.hide]: scrolledToBottom !== false
-        >
+            })}
-          <SVG src={chevronDown} />
+          >
+            <SVG src={chevronDown} />
+          </div>
         </div>
-      </div>
+      )}
     </Paper>
   );
 };

src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectFieldContent.tsx

@@ -62,7 +62,8 @@ const useStyles = makeStyles(
       padding: 8
     },
     hide: {
-      opacity: 0
+      opacity: 0,
+      zIndex: -1
     },
     hr: {
       margin: theme.spacing(1, 0)
@@ -228,17 +229,19 @@ const SingleAutocompleteSelectFieldContent: React.FC<
           </MenuItem>
         )}
       </div>
-      <div className={classes.arrowContainer}>
+      {choices.length > maxMenuItems && (
-        <div
+        <div className={classes.arrowContainer}>
-          className={classNames(classes.arrowInnerContainer, {
+          <div
-            // Needs to be explicitely compared to false because
+            className={classNames(classes.arrowInnerContainer, {
-            // scrolledToBottom can be either true, false or undefined
+              // Needs to be explicitely compared to false because
-            [classes.hide]: scrolledToBottom !== false
+              // scrolledToBottom can be either true, false or undefined
-          })}
+              [classes.hide]: scrolledToBottom !== false
-        >
+            })}
-          <SVG src={chevronDown} />
+          >
+            <SVG src={chevronDown} />
+          </div>
         </div>
-      </div>
+      )}
     </Paper>
   );
 };

src/products/views/ProductVariant.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { useIntl } from "react-intl";
 
 import placeholderImg from "@assets/images/placeholder255x255.png";
@@ -35,6 +35,10 @@ export const ProductVariant: React.FC<ProductUpdateProps> = ({
   const navigate = useNavigator();
   const notify = useNotifier();
   const intl = useIntl();
+  const [errors, setErrors] = useState([]);
+  useEffect(() => {
+    setErrors([]);
+  }, [variantId]);
 
   return (
     <TypedProductVariantQuery
@@ -54,8 +58,10 @@ export const ProductVariant: React.FC<ProductUpdateProps> = ({
           navigate(productUrl(productId));
         };
         const handleUpdate = (data: VariantUpdate) => {
-          if (!maybe(() => data.productVariantUpdate.productErrors.length)) {
+          if (!data.productVariantUpdate.productErrors.length) {
             notify({ text: intl.formatMessage(commonMessages.savedChanges) });
+          } else {
+            setErrors(data.productVariantUpdate.productErrors);
           }
         };
 
@@ -107,12 +113,7 @@ export const ProductVariant: React.FC<ProductUpdateProps> = ({
                 <>
                   <WindowTitle title={maybe(() => data.productVariant.name)} />
                   <ProductVariantPage
-                    errors={maybe(
+                    errors={errors}
-                      () =>
-                        updateVariant.opts.data.productVariantUpdate
-                          .productErrors,
-                      []
-                    )}
                     saveButtonBarState={formTransitionState}
                     loading={disableFormSave}
                     placeholderImage={placeholderImg}

src/storybook/__snapshots__/Stories.test.ts.snap

@@ -3051,17 +3051,6 @@ exports[`Storyshots Generics / Multiple select with autocomplete no data 1`] = `
             </span>
           </div>
         </div>
-        <div
-          class="MultiAutocompleteSelectFieldContent-arrowContainer-id"
-        >
-          <div
-            class="MultiAutocompleteSelectFieldContent-arrowInnerContainer-id MultiAutocompleteSelectFieldContent-hide-id"
-          >
-            <span
-              class="isvg pending"
-            />
-          </div>
-        </div>
       </div>
     </div>
   </div>
@@ -4980,17 +4969,6 @@ exports[`Storyshots Generics / Select with autocomplete no data 1`] = `
             No results found
           </div>
         </div>
-        <div
-          class="SingleAutocompleteSelectFieldContent-arrowContainer-id"
-        >
-          <div
-            class="SingleAutocompleteSelectFieldContent-arrowInnerContainer-id SingleAutocompleteSelectFieldContent-hide-id"
-          >
-            <span
-              class="isvg pending"
-            />
-          </div>
-        </div>
       </div>
     </div>
   </div>