Merge pull request #27518 from rezkiy37/fix/27354-wrong-focus-position

Fix the focus effect of categories
Expensify · Sep 23, 2023 · d0fa1f2 · d0fa1f2
2 parents 71db96d + a12d192
commit d0fa1f2
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 14 deletions.
diff --git a/src/components/CategoryPicker/index.js b/src/components/CategoryPicker/index.js
@@ -31,21 +31,36 @@ function CategoryPicker({selectedCategory, policyCategories, policyRecentlyUsedC
         ];
     }, [selectedCategory]);
 
+    const sections = useMemo(() => {
+        const {categoryOptions} = OptionsListUtils.getFilteredOptions(
+            {},
+            {},
+            [],
+            searchValue,
+            selectedOptions,
+            [],
+            false,
+            false,
+            true,
+            policyCategories,
+            policyRecentlyUsedCategories,
+            false,
+        );
+
+        return categoryOptions;
+    }, [policyCategories, policyRecentlyUsedCategories, searchValue, selectedOptions]);
+
     const initialFocusedIndex = useMemo(() => {
-        if (isCategoriesCountBelowThreshold && selectedOptions.length > 0) {
-            return _.chain(policyCategories)
-                .values()
-                .findIndex((category) => category.name === selectedOptions[0].name, true)
-                .value();
-        }
+        let categoryInitialFocusedIndex = 0;
 
-        return 0;
-    }, [policyCategories, selectedOptions, isCategoriesCountBelowThreshold]);
+        if (!_.isEmpty(searchValue) || isCategoriesCountBelowThreshold) {
+            const index = _.findIndex(lodashGet(sections, '[0].data', []), (category) => category.searchText === iou.category);
 
-    const sections = useMemo(
-        () => OptionsListUtils.getFilteredOptions({}, {}, [], searchValue, selectedOptions, [], false, false, true, policyCategories, policyRecentlyUsedCategories, false).categoryOptions,
-        [policyCategories, policyRecentlyUsedCategories, searchValue, selectedOptions],
-    );
+            categoryInitialFocusedIndex = index === -1 ? 0 : index;
+        }
+
+        return categoryInitialFocusedIndex;
+    }, [iou.category, searchValue, isCategoriesCountBelowThreshold, sections]);
 
     const headerMessage = OptionsListUtils.getHeaderMessage(lodashGet(sections, '[0].data.length', 0) > 0, false, searchValue);
     const shouldShowTextInput = !isCategoriesCountBelowThreshold;

diff --git a/src/components/OptionsSelector/BaseOptionsSelector.js b/src/components/OptionsSelector/BaseOptionsSelector.js
@@ -107,13 +107,13 @@ class BaseOptionsSelector extends Component {
             });
             return;
         }
-        const newFocusedIndex = this.props.selectedOptions.length;
 
+        const newFocusedIndex = this.props.selectedOptions.length;
         // eslint-disable-next-line react/no-did-update-set-state
         this.setState(
             {
                 allOptions: newOptions,
-                focusedIndex: newFocusedIndex,
+                focusedIndex: _.isNumber(this.props.initialFocusedIndex) ? this.props.initialFocusedIndex : newFocusedIndex,
             },
             () => {
                 // If we just toggled an option on a multi-selection page or cleared the search input, scroll to top