Merge pull request #31475 from tienifr/fix/30465

Fix: Two tags are highlighted at the same time
Expensify · Nov 23, 2023 · ced40a1 · ced40a1
2 parents 14abfa1 + faa9cd5
commit ced40a1
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 37 deletions.
diff --git a/src/components/CategoryPicker/index.js b/src/components/CategoryPicker/index.js
@@ -52,20 +52,9 @@ function CategoryPicker({selectedCategory, policyCategories, policyRecentlyUsedC
         return categoryOptions;
     }, [policyCategories, policyRecentlyUsedCategories, searchValue, selectedOptions]);
 
-    const initialFocusedIndex = useMemo(() => {
-        let categoryInitialFocusedIndex = 0;
-
-        if (!_.isEmpty(searchValue) || isCategoriesCountBelowThreshold) {
-            const index = _.findIndex(lodashGet(sections, '[0].data', []), (category) => category.searchText === selectedCategory);
-
-            categoryInitialFocusedIndex = index === -1 ? 0 : index;
-        }
-
-        return categoryInitialFocusedIndex;
-    }, [selectedCategory, searchValue, isCategoriesCountBelowThreshold, sections]);
-
     const headerMessage = OptionsListUtils.getHeaderMessageForNonUserList(lodashGet(sections, '[0].data.length', 0) > 0, searchValue);
     const shouldShowTextInput = !isCategoriesCountBelowThreshold;
+    const selectedOptionKey = lodashGet(_.filter(lodashGet(sections, '[0].data', []), (category) => category.searchText === selectedCategory)[0], 'keyForList');
 
     return (
         <OptionsSelector
@@ -74,7 +63,10 @@ function CategoryPicker({selectedCategory, policyCategories, policyRecentlyUsedC
             sections={sections}
             selectedOptions={selectedOptions}
             value={searchValue}
-            initialFocusedIndex={initialFocusedIndex}
+            // Focus the first option when searching
+            focusedIndex={0}
+            // Focus the selected option on first load
+            initiallyFocusedOptionKey={selectedOptionKey}
             headerMessage={headerMessage}
             shouldShowTextInput={shouldShowTextInput}
             textInputLabel={translate('common.search')}

diff --git a/src/components/OptionRow.js b/src/components/OptionRow.js
@@ -190,7 +190,6 @@ function OptionRow(props) {
                             props.optionIsFocused ? styles.sidebarLinkActive : null,
                             props.shouldHaveOptionSeparator && styles.borderTop,
                             !props.onSelectRow && !props.isDisabled ? styles.cursorDefault : null,
-                            props.isSelected && props.highlightSelected && styles.optionRowSelected,
                         ]}
                         accessibilityLabel={props.option.text}
                         role={CONST.ACCESSIBILITY_ROLE.BUTTON}

diff --git a/src/components/OptionsSelector/BaseOptionsSelector.js b/src/components/OptionsSelector/BaseOptionsSelector.js
@@ -137,7 +137,7 @@ class BaseOptionsSelector extends Component {
         this.setState(
             {
                 allOptions: newOptions,
-                focusedIndex: _.isNumber(this.props.initialFocusedIndex) ? this.props.initialFocusedIndex : newFocusedIndex,
+                focusedIndex: _.isNumber(this.props.focusedIndex) ? this.props.focusedIndex : newFocusedIndex,
             },
             () => {
                 // If we just toggled an option on a multi-selection page or cleared the search input, scroll to top
@@ -168,14 +168,14 @@ class BaseOptionsSelector extends Component {
      * @returns {Number}
      */
     getInitiallyFocusedIndex(allOptions) {
-        if (_.isNumber(this.props.initialFocusedIndex)) {
-            return this.props.initialFocusedIndex;
+        let defaultIndex;
+        if (this.props.shouldTextInputAppearBelowOptions) {
+            defaultIndex = allOptions.length;
+        } else if (this.props.focusedIndex >= 0) {
+            defaultIndex = this.props.focusedIndex;
+        } else {
+            defaultIndex = this.props.selectedOptions.length;
         }
-
-        if (this.props.selectedOptions.length > 0) {
-            return this.props.selectedOptions.length;
-        }
-        const defaultIndex = this.props.shouldTextInputAppearBelowOptions ? allOptions.length : 0;
         if (_.isUndefined(this.props.initiallyFocusedOptionKey)) {
             return defaultIndex;
         }

diff --git a/src/components/OptionsSelector/optionsSelectorPropTypes.js b/src/components/OptionsSelector/optionsSelectorPropTypes.js
@@ -127,8 +127,8 @@ const propTypes = {
     /** Whether to wrap large text up to 2 lines */
     isRowMultilineSupported: PropTypes.bool,
 
-    /** Initial focused index value */
-    initialFocusedIndex: PropTypes.number,
+    /** Index for option to focus on */
+    focusedIndex: PropTypes.number,
 
     /** Whether the text input should intercept swipes or not */
     shouldTextInputInterceptSwipe: PropTypes.bool,
@@ -174,7 +174,7 @@ const defaultProps = {
     onChangeText: () => {},
     shouldUseStyleForChildren: true,
     isRowMultilineSupported: false,
-    initialFocusedIndex: undefined,
+    focusedIndex: undefined,
     shouldTextInputInterceptSwipe: false,
     shouldAllowScrollingChildren: false,
     nestedScrollEnabled: true,

diff --git a/src/components/TagPicker/index.js b/src/components/TagPicker/index.js
@@ -37,17 +37,6 @@ function TagPicker({selectedTag, tag, policyTags, policyRecentlyUsedTags, onSubm
         ];
     }, [selectedTag]);
 
-    const initialFocusedIndex = useMemo(() => {
-        if (isTagsCountBelowThreshold && selectedOptions.length > 0) {
-            return _.chain(policyTagList)
-                .values()
-                .findIndex((policyTag) => policyTag.name === selectedOptions[0].name, true)
-                .value();
-        }
-
-        return 0;
-    }, [policyTagList, selectedOptions, isTagsCountBelowThreshold]);
-
     const enabledTags = useMemo(() => {
         if (!shouldShowDisabledAndSelectedOption) {
             return policyTagList;
@@ -64,6 +53,8 @@ function TagPicker({selectedTag, tag, policyTags, policyRecentlyUsedTags, onSubm
 
     const headerMessage = OptionsListUtils.getHeaderMessageForNonUserList(lodashGet(sections, '[0].data.length', 0) > 0, searchValue);
 
+    const selectedOptionKey = lodashGet(_.filter(lodashGet(sections, '[0].data', []), (policyTag) => policyTag.searchText === selectedTag)[0], 'keyForList');
+
     return (
         <OptionsSelector
             optionHoveredStyle={styles.hoveredComponentBG}
@@ -77,7 +68,10 @@ function TagPicker({selectedTag, tag, policyTags, policyRecentlyUsedTags, onSubm
             isRowMultilineSupported
             shouldShowTextInput={shouldShowTextInput}
             value={searchValue}
-            initialFocusedIndex={initialFocusedIndex}
+            // Focus the first option when searching
+            focusedIndex={0}
+            // Focus the selected option on first load
+            initiallyFocusedOptionKey={selectedOptionKey}
             onChangeText={setSearchValue}
             onSelectRow={onSubmit}
         />