Fixed: Unable to close indexer category select input on mobile

(cherry picked from commit e42d1af)
Radarr · Feb 14, 2021 · 33cd9f5 · 33cd9f5
1 parent 94df76b
commit 33cd9f5
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 1 deletion.
diff --git 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
@@ -518,6 +518,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
@@ -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
@@ -12,7 +12,9 @@ class EnhancedSelectInputOption extends Component {
   //
   // Listeners
 
-  onPress = () => {
+  onPress = (e) => {
+    e.preventDefault();
+
     const {
       id,
       onSelect