Merge pull request #281 from mirumee/fix/dropdown-items

Fix clickable areas

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
 
 ## 2.0.0
 

package-lock.json

@@ -3289,7 +3289,8 @@
     "@types/semver-compare": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@types/semver-compare/-/semver-compare-1.0.1.tgz",
-      "integrity": "sha512-wx2LQVvKlEkhXp/HoKIZ/aSL+TvfJdKco8i0xJS3aR877mg4qBHzNT6+B5a61vewZHo79EdZavskGnRXEC2H6A=="
+      "integrity": "sha512-wx2LQVvKlEkhXp/HoKIZ/aSL+TvfJdKco8i0xJS3aR877mg4qBHzNT6+B5a61vewZHo79EdZavskGnRXEC2H6A==",
+      "dev": true
     },
     "@types/shallowequal": {
       "version": "1.1.1",

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/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>