From e44331715595fa03d6f443350ba99973fb9aa65a Mon Sep 17 00:00:00 2001 From: tienifr Date: Sat, 28 Oct 2023 16:13:07 +0700 Subject: [PATCH 1/4] fix: 30465 --- src/components/TagPicker/index.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/components/TagPicker/index.js b/src/components/TagPicker/index.js index 05eca664bd0f..ea29305c16b9 100644 --- a/src/components/TagPicker/index.js +++ b/src/components/TagPicker/index.js @@ -17,7 +17,8 @@ function TagPicker({selectedTag, tag, policyTags, policyRecentlyUsedTags, onSubm const policyRecentlyUsedTagsList = lodashGet(policyRecentlyUsedTags, tag, []); const policyTagList = PolicyUtils.getTagList(policyTags, tag); - const policyTagsCount = _.size(_.filter(policyTagList, (policyTag) => policyTag.enabled)); + const enabledTags = _.filter(policyTagList, (policyTag) => policyTag.enabled); + const policyTagsCount = _.size(enabledTags); const isTagsCountBelowThreshold = policyTagsCount < CONST.TAG_LIST_THRESHOLD; const shouldShowTextInput = !isTagsCountBelowThreshold; @@ -38,14 +39,14 @@ function TagPicker({selectedTag, tag, policyTags, policyRecentlyUsedTags, onSubm const initialFocusedIndex = useMemo(() => { if (isTagsCountBelowThreshold && selectedOptions.length > 0) { - return _.chain(policyTagList) + return _.chain(enabledTags) .values() .findIndex((policyTag) => policyTag.name === selectedOptions[0].name, true) .value(); } return 0; - }, [policyTagList, selectedOptions, isTagsCountBelowThreshold]); + }, [enabledTags, selectedOptions, isTagsCountBelowThreshold]); const sections = useMemo( () => From 9b5d2e7a14f2d71a56a01364a26f32472336ac02 Mon Sep 17 00:00:00 2001 From: tienifr Date: Fri, 17 Nov 2023 14:00:39 +0700 Subject: [PATCH 2/4] fix: two tags highlighted at the same time --- src/components/CategoryPicker/index.js | 15 ++----------- src/components/OptionRow.js | 1 - .../OptionsSelector/BaseOptionsSelector.js | 16 +++++++------- .../optionsSelectorPropTypes.js | 6 +++--- src/components/TagPicker/index.js | 21 +++++-------------- 5 files changed, 18 insertions(+), 41 deletions(-) diff --git a/src/components/CategoryPicker/index.js b/src/components/CategoryPicker/index.js index ff7087df91dd..405be77bc46a 100644 --- a/src/components/CategoryPicker/index.js +++ b/src/components/CategoryPicker/index.js @@ -52,18 +52,6 @@ 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; @@ -74,7 +62,8 @@ function CategoryPicker({selectedCategory, policyCategories, policyRecentlyUsedC sections={sections} selectedOptions={selectedOptions} value={searchValue} - initialFocusedIndex={initialFocusedIndex} + focusedIndex={0} + initiallyFocusedOptionKey={lodashGet(_.filter(lodashGet(sections, '[0].data', []), (category) => category.searchText === selectedCategory)[0], 'keyForList')} headerMessage={headerMessage} shouldShowTextInput={shouldShowTextInput} textInputLabel={translate('common.search')} diff --git a/src/components/OptionRow.js b/src/components/OptionRow.js index e1c554dc1d37..8afda6c375bb 100644 --- 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 index 8c480c27f20f..021018684dec 100755 --- a/src/components/OptionsSelector/BaseOptionsSelector.js +++ b/src/components/OptionsSelector/BaseOptionsSelector.js @@ -120,7 +120,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 @@ -151,14 +151,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 c96f11b560c0..644f7b53d663 100644 --- a/src/components/TagPicker/index.js +++ b/src/components/TagPicker/index.js @@ -18,8 +18,7 @@ function TagPicker({selectedTag, tag, policyTags, policyRecentlyUsedTags, onSubm const policyRecentlyUsedTagsList = lodashGet(policyRecentlyUsedTags, tag, []); const policyTagList = PolicyUtils.getTagList(policyTags, tag); - const enabledTags = _.filter(policyTagList, (policyTag) => policyTag.enabled); - const policyTagsCount = _.size(enabledTags); + const policyTagsCount = _.size(_.filter(policyTagList, (policyTag) => policyTag.enabled)); const isTagsCountBelowThreshold = policyTagsCount < CONST.TAG_LIST_THRESHOLD; const shouldShowTextInput = !isTagsCountBelowThreshold; @@ -38,17 +37,6 @@ function TagPicker({selectedTag, tag, policyTags, policyRecentlyUsedTags, onSubm ]; }, [selectedTag]); - const initialFocusedIndex = useMemo(() => { - if (isTagsCountBelowThreshold && selectedOptions.length > 0) { - return _.chain(enabledTags) - .values() - .findIndex((policyTag) => policyTag.name === selectedOptions[0].name, true) - .value(); - } - - return 0; - }, [enabledTags, selectedOptions, isTagsCountBelowThreshold]); - const sections = useMemo( () => OptionsListUtils.getFilteredOptions({}, {}, [], searchValue, selectedOptions, [], false, false, false, {}, [], true, policyTagList, policyRecentlyUsedTagsList, false).tagOptions, @@ -70,7 +58,8 @@ function TagPicker({selectedTag, tag, policyTags, policyRecentlyUsedTags, onSubm isRowMultilineSupported shouldShowTextInput={shouldShowTextInput} value={searchValue} - initialFocusedIndex={initialFocusedIndex} + focusedIndex={0} + initiallyFocusedOptionKey={lodashGet(_.filter(lodashGet(sections, '[0].data', []), (policyTag) => policyTag.searchText === selectedTag)[0], 'keyForList')} onChangeText={setSearchValue} onSelectRow={onSubmit} /> @@ -83,9 +72,9 @@ TagPicker.defaultProps = defaultProps; export default withOnyx({ policyTags: { - key: ({policyID}) => `${ONYXKEYS.COLLECTION.POLICY_TAGS}${policyID}`, + key: ({policyID}) => `${ONYXKEYS.COLLECTION.POLICY_TAGS}72EBA7BA2835EE2C`, }, policyRecentlyUsedTags: { - key: ({policyID}) => `${ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_TAGS}${policyID}`, + key: ({policyID}) => `${ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_TAGS}72EBA7BA2835EE2C`, }, })(TagPicker); From 8793c8ca2db7154c0ee47c93fab406b85163d99c Mon Sep 17 00:00:00 2001 From: tienifr Date: Fri, 17 Nov 2023 14:02:36 +0700 Subject: [PATCH 3/4] retrieve correct Onyx data --- src/components/TagPicker/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/TagPicker/index.js b/src/components/TagPicker/index.js index 644f7b53d663..c0c162a71e54 100644 --- a/src/components/TagPicker/index.js +++ b/src/components/TagPicker/index.js @@ -72,9 +72,9 @@ TagPicker.defaultProps = defaultProps; export default withOnyx({ policyTags: { - key: ({policyID}) => `${ONYXKEYS.COLLECTION.POLICY_TAGS}72EBA7BA2835EE2C`, + key: ({policyID}) => `${ONYXKEYS.COLLECTION.POLICY_TAGS}${policyID}`, }, policyRecentlyUsedTags: { - key: ({policyID}) => `${ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_TAGS}72EBA7BA2835EE2C`, + key: ({policyID}) => `${ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_TAGS}${policyID}`, }, })(TagPicker); From faa9cd5babfdb7125f8cd0d96878ad576fee4efb Mon Sep 17 00:00:00 2001 From: tienifr Date: Wed, 22 Nov 2023 00:27:45 +0700 Subject: [PATCH 4/4] add comment and refector separate variable --- src/components/CategoryPicker/index.js | 5 ++++- src/components/TagPicker/index.js | 6 +++++- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/src/components/CategoryPicker/index.js b/src/components/CategoryPicker/index.js index 405be77bc46a..36cf9b1deadc 100644 --- a/src/components/CategoryPicker/index.js +++ b/src/components/CategoryPicker/index.js @@ -54,6 +54,7 @@ function CategoryPicker({selectedCategory, policyCategories, policyRecentlyUsedC 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 ( category.searchText === selectedCategory)[0], 'keyForList')} + // Focus the selected option on first load + initiallyFocusedOptionKey={selectedOptionKey} headerMessage={headerMessage} shouldShowTextInput={shouldShowTextInput} textInputLabel={translate('common.search')} diff --git a/src/components/TagPicker/index.js b/src/components/TagPicker/index.js index 05b28757705c..f9071aa5267d 100644 --- a/src/components/TagPicker/index.js +++ b/src/components/TagPicker/index.js @@ -53,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 ( policyTag.searchText === selectedTag)[0], 'keyForList')} + // Focus the selected option on first load + initiallyFocusedOptionKey={selectedOptionKey} onChangeText={setSearchValue} onSelectRow={onSubmit} />