From e42d1af5ff8f3eb987195caa7ec8a0bbaf4a00c3 Mon Sep 17 00:00:00 2001
From: Mark McDowall <mark@mcdowall.ca>
Date: Tue, 9 Feb 2021 17:32:41 -0800
Subject: [PATCH] Fixed: Unable to close indexer category select input on
 mobile

Closes #4296
---
 .../Components/Form/EnhancedSelectInput.css    | 18 ++++++++++++++++++
 .../src/Components/Form/EnhancedSelectInput.js | 13 +++++++++++++
 .../Form/EnhancedSelectInputOption.css         |  4 ++++
 .../Form/EnhancedSelectInputOption.js          |  4 +++-
 4 files changed, 38 insertions(+), 1 deletion(-)

diff --git a/frontend/src/Components/Form/EnhancedSelectInput.css b/frontend/src/Components/Form/EnhancedSelectInput.css
index 60cd28d69..f971f6517 100644
--- a/frontend/src/Components/Form/EnhancedSelectInput.css
+++ b/frontend/src/Components/Form/EnhancedSelectInput.css
@@ -85,3 +85,21 @@
   display: inline-block;
   margin: 5px -5px 5px 0;
 }
+
+.mobileCloseButtonContainer {
+  display: flex;
+  justify-content: flex-end;
+  height: 40px;
+  border-bottom: 1px solid $borderColor;
+}
+
+.mobileCloseButton {
+  width: 40px;
+  height: 40px;
+  text-align: center;
+  line-height: 40px;
+
+  &:hover {
+    color: $modalCloseButtonHoverColor;
+  }
+}
diff --git a/frontend/src/Components/Form/EnhancedSelectInput.js b/frontend/src/Components/Form/EnhancedSelectInput.js
index 8705e7310..729139534 100644
--- a/frontend/src/Components/Form/EnhancedSelectInput.js
+++ b/frontend/src/Components/Form/EnhancedSelectInput.js
@@ -9,6 +9,7 @@ import * as keyCodes from 'Utilities/Constants/keyCodes';
 import { icons, sizes, scrollDirections } from 'Helpers/Props';
 import Icon from 'Components/Icon';
 import Portal from 'Components/Portal';
+import IconButton from 'Components/Link/IconButton';
 import Link from 'Components/Link/Link';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import Measure from 'Components/Measure';
@@ -518,6 +519,18 @@ class EnhancedSelectInput extends Component {
                 scrollDirection={scrollDirections.NONE}
               >
                 <Scroller className={styles.optionsModalScroller}>
+                  <div className={styles.mobileCloseButtonContainer}>
+                    <Link
+                      className={styles.mobileCloseButton}
+                      onPress={this.onOptionsModalClose}
+                    >
+                      <Icon
+                        name={icons.CLOSE}
+                        size={18}
+                      />
+                    </Link>
+                  </div>
+
                   {
                     values.map((v, index) => {
                       const hasParent = v.parentKey !== undefined;
diff --git a/frontend/src/Components/Form/EnhancedSelectInputOption.css b/frontend/src/Components/Form/EnhancedSelectInputOption.css
index 085b64497..f6b6136ae 100644
--- a/frontend/src/Components/Form/EnhancedSelectInputOption.css
+++ b/frontend/src/Components/Form/EnhancedSelectInputOption.css
@@ -54,4 +54,8 @@
   &:last-child {
     border: none;
   }
+
+  &:hover {
+    background-color: unset;
+  }
 }
diff --git a/frontend/src/Components/Form/EnhancedSelectInputOption.js b/frontend/src/Components/Form/EnhancedSelectInputOption.js
index 84bd62f7a..d4fad3b24 100644
--- a/frontend/src/Components/Form/EnhancedSelectInputOption.js
+++ b/frontend/src/Components/Form/EnhancedSelectInputOption.js
@@ -12,7 +12,9 @@ class EnhancedSelectInputOption extends Component {
   //
   // Listeners
 
-  onPress = () => {
+  onPress = (e) => {
+    e.preventDefault();
+
     const {
       id,
       onSelect