diff --git a/CHANGELOG.md b/CHANGELOG.md
index 075d61cb5..d4f8d16aa 100644
--- a/CHANGELOG.md
+++ b/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
 
diff --git a/package-lock.json b/package-lock.json
index 41c04c99a..128fb29ce 100644
--- a/package-lock.json
+++ b/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",
diff --git a/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectFieldContent.tsx b/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectFieldContent.tsx
index cb99854fe..2f3032c11 100644
--- a/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectFieldContent.tsx
+++ b/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}>
-        <div
-          className={classNames(classes.arrowInnerContainer, {
-            // Needs to be explicitely compared to false because
-            // scrolledToBottom can be either true, false or undefined
-            [classes.hide]: scrolledToBottom !== false
-          })}
-        >
-          <SVG src={chevronDown} />
+      {choices.length > maxMenuItems && (
+        <div className={classes.arrowContainer}>
+          <div
+            className={classNames(classes.arrowInnerContainer, {
+              // Needs to be explicitely compared to false because
+              // scrolledToBottom can be either true, false or undefined
+              [classes.hide]: scrolledToBottom !== false
+            })}
+          >
+            <SVG src={chevronDown} />
+          </div>
         </div>
-      </div>
+      )}
     </Paper>
   );
 };
diff --git a/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectFieldContent.tsx b/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectFieldContent.tsx
index 35b56e9e9..602a24b47 100644
--- a/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectFieldContent.tsx
+++ b/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}>
-        <div
-          className={classNames(classes.arrowInnerContainer, {
-            // Needs to be explicitely compared to false because
-            // scrolledToBottom can be either true, false or undefined
-            [classes.hide]: scrolledToBottom !== false
-          })}
-        >
-          <SVG src={chevronDown} />
+      {choices.length > maxMenuItems && (
+        <div className={classes.arrowContainer}>
+          <div
+            className={classNames(classes.arrowInnerContainer, {
+              // Needs to be explicitely compared to false because
+              // scrolledToBottom can be either true, false or undefined
+              [classes.hide]: scrolledToBottom !== false
+            })}
+          >
+            <SVG src={chevronDown} />
+          </div>
         </div>
-      </div>
+      )}
     </Paper>
   );
 };
diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap
index 6487a2acc..0796e9af9 100644
--- a/src/storybook/__snapshots__/Stories.test.ts.snap
+++ b/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>