This commit is contained in:
Matheus Roberson 2026-05-02 20:00:34 +01:00 committed by GitHub
commit 48997410a2
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
5 changed files with 21 additions and 8 deletions

View file

@ -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>

View file

@ -13,6 +13,10 @@
&.isDisabled {
cursor: not-allowed;
}
&.isFocused {
background-color: var(--inputHoverBackgroundColor);
}
}
.optionCheck {

View file

@ -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;

View file

@ -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;

View file

@ -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 (