From bc5f61b9b874db107f7148b2a82e63003f9e608e Mon Sep 17 00:00:00 2001
From: Matheus Roberson <mewrso@gmail.com>
Date: Mon, 2 Mar 2026 18:28:43 -0300
Subject: [PATCH] Fixed: (Prowlarr/Prowlarr#361) and add focus to navigation in
 dropdown

---
 frontend/src/Components/Form/EnhancedSelectInput.js       | 7 ++++---
 .../src/Components/Form/EnhancedSelectInputOption.css     | 4 ++++
 frontend/src/Components/Form/EnhancedSelectInputOption.js | 8 ++++++--
 frontend/src/Components/Form/HintedSelectInputOption.js   | 8 ++++++--
 .../src/Components/Form/HintedSelectInputSelectedValue.js | 2 +-
 5 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/frontend/src/Components/Form/EnhancedSelectInput.js b/frontend/src/Components/Form/EnhancedSelectInput.js
index 79b1c999c..6bd970d5a 100644
--- a/frontend/src/Components/Form/EnhancedSelectInput.js
+++ b/frontend/src/Components/Form/EnhancedSelectInput.js
@@ -192,7 +192,6 @@ class EnhancedSelectInput extends Component {
       isOpen,
       selectedIndex
     } = this.state;
-
     const keyCode = event.keyCode;
     const newState = {};
 
@@ -229,12 +228,12 @@ class EnhancedSelectInput extends Component {
 
     if (keyCode === keyCodes.ENTER) {
       event.preventDefault();
-      newState.isOpen = false;
+      newState.isOpen = true;
       this.onSelect(getKey(selectedIndex, values));
     }
 
     if (keyCode === keyCodes.TAB) {
-      newState.isOpen = false;
+      newState.isOpen = true;
       this.onSelect(getKey(selectedIndex, values));
     }
 
@@ -486,6 +485,7 @@ class EnhancedSelectInput extends Component {
                               const hasParent = v.parentKey !== undefined;
                               const depth = hasParent ? 1 : 0;
                               const parentSelected = hasParent && Array.isArray(value) && value.includes(v.parentKey);
+                              const isFocused = index === this.state.selectedIndex;
                               return (
                                 <OptionComponent
                                   key={v.key}
@@ -498,6 +498,7 @@ class EnhancedSelectInput extends Component {
                                   {...v}
                                   isMobile={false}
                                   onSelect={this.onSelect}
+                                  isFocused={isFocused}
                                 >
                                   {v.value}
                                 </OptionComponent>
diff --git a/frontend/src/Components/Form/EnhancedSelectInputOption.css b/frontend/src/Components/Form/EnhancedSelectInputOption.css
index d7f0e861b..2a9b9115b 100644
--- a/frontend/src/Components/Form/EnhancedSelectInputOption.css
+++ b/frontend/src/Components/Form/EnhancedSelectInputOption.css
@@ -13,6 +13,10 @@
   &.isDisabled {
     cursor: not-allowed;
   }
+
+  &.isFocused {
+    background-color: var(--inputHoverBackgroundColor);
+  }
 }
 
 .optionCheck {
diff --git a/frontend/src/Components/Form/EnhancedSelectInputOption.js b/frontend/src/Components/Form/EnhancedSelectInputOption.js
index b2783dbaa..47af93345 100644
--- a/frontend/src/Components/Form/EnhancedSelectInputOption.js
+++ b/frontend/src/Components/Form/EnhancedSelectInputOption.js
@@ -40,6 +40,7 @@ class EnhancedSelectInputOption extends Component {
       isHidden,
       isMultiSelect,
       isMobile,
+      isFocused,
       children
     } = this.props;
 
@@ -50,7 +51,8 @@ class EnhancedSelectInputOption extends Component {
           isSelected && !isMultiSelect && styles.isSelected,
           isDisabled && !isMultiSelect && styles.isDisabled,
           isHidden && styles.isHidden,
-          isMobile && styles.isMobile
+          isMobile && styles.isMobile,
+          isFocused && styles.isFocused
         )}
         component="div"
         isDisabled={isDisabled}
@@ -98,6 +100,7 @@ EnhancedSelectInputOption.propTypes = {
   isHidden: PropTypes.bool.isRequired,
   isMultiSelect: PropTypes.bool.isRequired,
   isMobile: PropTypes.bool.isRequired,
+  isFocused: PropTypes.bool.isRequired,
   children: PropTypes.node.isRequired,
   onSelect: PropTypes.func.isRequired
 };
@@ -107,7 +110,8 @@ EnhancedSelectInputOption.defaultProps = {
   depth: 0,
   isDisabled: false,
   isHidden: false,
-  isMultiSelect: false
+  isMultiSelect: false,
+  isFocused: false
 };
 
 export default EnhancedSelectInputOption;
diff --git a/frontend/src/Components/Form/HintedSelectInputOption.js b/frontend/src/Components/Form/HintedSelectInputOption.js
index 4f59fc0a4..185321513 100644
--- a/frontend/src/Components/Form/HintedSelectInputOption.js
+++ b/frontend/src/Components/Form/HintedSelectInputOption.js
@@ -14,6 +14,7 @@ function HintedSelectInputOption(props) {
     isDisabled,
     isMultiSelect,
     isMobile,
+    isFocused,
     ...otherProps
   } = props;
 
@@ -26,6 +27,7 @@ function HintedSelectInputOption(props) {
       isHidden={isDisabled}
       isMultiSelect={isMultiSelect}
       isMobile={isMobile}
+      isFocused={isFocused}
       {...otherProps}
     >
       <div className={classNames(
@@ -54,13 +56,15 @@ HintedSelectInputOption.propTypes = {
   isSelected: PropTypes.bool.isRequired,
   isDisabled: PropTypes.bool.isRequired,
   isMultiSelect: PropTypes.bool.isRequired,
-  isMobile: PropTypes.bool.isRequired
+  isMobile: PropTypes.bool.isRequired,
+  isFocused: PropTypes.bool.isRequired
 };
 
 HintedSelectInputOption.defaultProps = {
   isDisabled: false,
   isHidden: false,
-  isMultiSelect: false
+  isMultiSelect: false,
+  isFocused: false
 };
 
 export default HintedSelectInputOption;
diff --git a/frontend/src/Components/Form/HintedSelectInputSelectedValue.js b/frontend/src/Components/Form/HintedSelectInputSelectedValue.js
index a3fecf324..cc62a05eb 100644
--- a/frontend/src/Components/Form/HintedSelectInputSelectedValue.js
+++ b/frontend/src/Components/Form/HintedSelectInputSelectedValue.js
@@ -24,7 +24,7 @@ function HintedSelectInputSelectedValue(props) {
     >
       <div className={styles.valueText}>
         {
-          isMultiSelect ?
+          isMultiSelect && Array.isArray(value) ?
             value.map((key, index) => {
               const v = valuesMap[key];
               return (