diff --git a/src/components/CategoryPicker/index.js b/src/components/CategoryPicker/index.js index ff7087df91dd..36cf9b1deadc 100644 --- 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 ( { // 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 index 94aab8fac5f6..ba4f5beb55cd 100644 --- 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 index d6d49e3fe288..f9071aa5267d 100644 --- 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 (