Skip to content

Commit

Permalink
Merge pull request Expensify#27518 from rezkiy37/fix/27354-wrong-focu…
Browse files Browse the repository at this point in the history
…s-position

Fix the focus effect of categories
  • Loading branch information
bondydaa authored Sep 23, 2023
2 parents 71db96d + a12d192 commit d0fa1f2
Show file tree
Hide file tree
Showing 2 changed files with 29 additions and 14 deletions.
39 changes: 27 additions & 12 deletions src/components/CategoryPicker/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
4 changes: 2 additions & 2 deletions src/components/OptionsSelector/BaseOptionsSelector.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down

0 comments on commit d0fa1f2

Please sign in to comment.