From 1311588157eb6947739089cda637f504a1cb53a2 Mon Sep 17 00:00:00 2001
From: dominik-zeglen <flesz3@o2.pl>
Date: Fri, 29 Nov 2019 13:19:18 +0100
Subject: [PATCH 1/4] Fix clickable areas

---
 .../MultiAutocompleteSelectFieldContent.tsx   | 22 ++++++++++---------
 .../SingleAutocompleteSelectFieldContent.tsx  | 22 ++++++++++---------
 2 files changed, 24 insertions(+), 20 deletions(-)

diff --git a/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectFieldContent.tsx b/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectFieldContent.tsx
index cb99854fe..e059c6880 100644
--- a/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectFieldContent.tsx
+++ b/src/components/MultiAutocompleteSelectField/MultiAutocompleteSelectFieldContent.tsx
@@ -275,17 +275,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..ba948c0a0 100644
--- a/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectFieldContent.tsx
+++ b/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectFieldContent.tsx
@@ -228,17 +228,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>
   );
 };

From d8c4b7640fbc03d0c6584c2719f7d59261618d4e Mon Sep 17 00:00:00 2001
From: dominik-zeglen <flesz3@o2.pl>
Date: Fri, 29 Nov 2019 13:21:59 +0100
Subject: [PATCH 2/4] Update changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5bb57de0f..f2d285c24 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -15,6 +15,7 @@ All notable, unreleased changes to this project will be documented in this file.
 - Use searches as hooks instead of components - #262 by @dominik-zeglen
 - Add navigator - #267 by @dominik-zeglen
 - Fix voucher limit - #271 by @dominik-zeglen
+- Fix dropdown clickable areas - #281 by @dominik-zeglen
 
 ## 2.0.0
 

From 4f82cc2d4c29b0998d3914fd44e8d0d5ebecf6ab Mon Sep 17 00:00:00 2001
From: dominik-zeglen <flesz3@o2.pl>
Date: Mon, 2 Dec 2019 16:37:48 +0100
Subject: [PATCH 3/4] Update snapshots

---
 .../__snapshots__/Stories.test.ts.snap        | 22 -------------------
 1 file changed, 22 deletions(-)

diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap
index ec9718967..660fee0a7 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>

From 76a60f7dfe223adce5bd6fe355c71e007bc081ce Mon Sep 17 00:00:00 2001
From: dominik-zeglen <flesz3@o2.pl>
Date: Mon, 2 Dec 2019 16:48:19 +0100
Subject: [PATCH 4/4] Let click event pass through arrow

---
 package-lock.json                                              | 3 ++-
 .../MultiAutocompleteSelectFieldContent.tsx                    | 3 ++-
 .../SingleAutocompleteSelectFieldContent.tsx                   | 3 ++-
 3 files changed, 6 insertions(+), 3 deletions(-)

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 e059c6880..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)
diff --git a/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectFieldContent.tsx b/src/components/SingleAutocompleteSelectField/SingleAutocompleteSelectFieldContent.tsx
index ba948c0a0..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)