Merge pull request #33265 from DylanDylann/fix/32388-selected-dropdow…

…n-item-with-tab-key-is-not-opened Fix: focusing on item by tab key does not work
Expensify · Dec 21, 2023 · d3adb4f · d3adb4f
2 parents 0a6c4e7 + ce0500f
commit d3adb4f
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 2 deletions.
diff --git a/src/components/OptionRow.js b/src/components/OptionRow.js
@@ -76,6 +76,8 @@ const propTypes = {
     /** Whether to wrap large text up to 2 lines */
     isMultilineSupported: PropTypes.bool,
 
+    /** Key used internally by React */
+    keyForList: PropTypes.string,
     style: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.object), PropTypes.object]),
 
     ...withLocalizePropTypes,
@@ -99,6 +101,7 @@ const defaultProps = {
     shouldHaveOptionSeparator: false,
     shouldDisableRowInnerPadding: false,
     shouldPreventDefaultFocusOnSelectRow: false,
+    keyForList: undefined,
 };
 
 function OptionRow(props) {
@@ -162,6 +165,7 @@ function OptionRow(props) {
             <Hoverable>
                 {(hovered) => (
                     <PressableWithFeedback
+                        testID={props.keyForList}
                         ref={(el) => (pressableRef.current = el)}
                         onPress={(e) => {
                             if (!props.onSelectRow) {

diff --git a/src/components/OptionsList/BaseOptionsList.js b/src/components/OptionsList/BaseOptionsList.js
@@ -201,6 +201,7 @@ function BaseOptionsList({
 
         return (
             <OptionRow
+                keyForList={item.keyForList}
                 option={item}
                 showTitleTooltip={showTitleTooltip}
                 hoverStyle={optionHoveredStyle}

diff --git a/src/components/OptionsSelector/BaseOptionsSelector.js b/src/components/OptionsSelector/BaseOptionsSelector.js
@@ -299,8 +299,9 @@ class BaseOptionsSelector extends Component {
         }
     }
 
-    selectFocusedOption() {
-        const focusedOption = this.state.allOptions[this.state.focusedIndex];
+    selectFocusedOption(e) {
+        const focusedItemKey = lodashGet(e, ['target', 'attributes', 'data-testid', 'value']);
+        const focusedOption = focusedItemKey ? _.find(this.state.allOptions, (option) => option.keyForList === focusedItemKey) : this.state.allOptions[this.state.focusedIndex];
 
         if (!focusedOption || !this.props.isFocused) {
             return;