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 (
{v.value}
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}
>
{
- isMultiSelect ?
+ isMultiSelect && Array.isArray(value) ?
value.map((key, index) => {
const v = valuesMap[key];
return (