From c431f9e7f77bfbadcc1fecf4d15a794798998bd9 Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Thu, 15 Feb 2024 22:49:52 +0700 Subject: [PATCH 1/4] fix selected category is not highlighted --- src/components/CategoryPicker/index.js | 2 +- .../OptionsSelector/BaseOptionsSelector.js | 12 +++++++++--- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/src/components/CategoryPicker/index.js b/src/components/CategoryPicker/index.js index a957e31a9de4..a8ff663cebf2 100644 --- a/src/components/CategoryPicker/index.js +++ b/src/components/CategoryPicker/index.js @@ -84,7 +84,7 @@ CategoryPicker.defaultProps = defaultProps; export default withOnyx({ policyCategories: { - key: ({policyID}) => `${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${policyID}`, + key: ({policyID}) => `${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${"062D53707053B5B9"}`, }, policyRecentlyUsedCategories: { key: ({policyID}) => `${ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_CATEGORIES}${policyID}`, diff --git a/src/components/OptionsSelector/BaseOptionsSelector.js b/src/components/OptionsSelector/BaseOptionsSelector.js index 26016bd51ec0..dc3c34b78c0d 100755 --- a/src/components/OptionsSelector/BaseOptionsSelector.js +++ b/src/components/OptionsSelector/BaseOptionsSelector.js @@ -2,7 +2,7 @@ import lodashGet from 'lodash/get'; import PropTypes from 'prop-types'; import React, {Component} from 'react'; import {ScrollView, View} from 'react-native'; -import _ from 'underscore'; +import _, {find, findIndex} from 'underscore'; import ArrowKeyFocusManager from '@components/ArrowKeyFocusManager'; import Button from '@components/Button'; import FixedFooter from '@components/FixedFooter'; @@ -84,6 +84,7 @@ class BaseOptionsSelector extends Component { const allOptions = this.flattenSections(); const sections = this.sliceSections(); const focusedIndex = this.getInitiallyFocusedIndex(allOptions); + this.focusedOption = allOptions[focusedIndex]; this.state = { sections, @@ -146,6 +147,10 @@ class BaseOptionsSelector extends Component { }); } + if (prevState.focusedIndex !== this.state.focusedIndex) { + this.focusedOption = this.state.allOptions[this.state.focusedIndex]; + } + if (_.isEqual(this.props.sections, prevProps.sections)) { return; } @@ -162,13 +167,14 @@ class BaseOptionsSelector extends Component { } const newFocusedIndex = this.props.selectedOptions.length; const isNewFocusedIndex = newFocusedIndex !== this.state.focusedIndex; - + const prevFocusedOption = find(newOptions, (option) => this.focusedOption && option.keyForList === this.focusedOption.keyForList); + const prevFocusedOptionIndex = prevFocusedOption ? findIndex(newOptions, (option) => this.focusedOption && option.keyForList === this.focusedOption.keyForList) : undefined; // eslint-disable-next-line react/no-did-update-set-state this.setState( { sections: newSections, allOptions: newOptions, - focusedIndex: _.isNumber(this.props.focusedIndex) ? this.props.focusedIndex : newFocusedIndex, + focusedIndex: prevFocusedOptionIndex || _.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 From 10df32a647abe71ae14ea842b0a07d5c54a4109e Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Thu, 15 Feb 2024 23:39:44 +0700 Subject: [PATCH 2/4] fix logic issue --- src/components/OptionsSelector/BaseOptionsSelector.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/OptionsSelector/BaseOptionsSelector.js b/src/components/OptionsSelector/BaseOptionsSelector.js index dc3c34b78c0d..d4913b4827f7 100755 --- a/src/components/OptionsSelector/BaseOptionsSelector.js +++ b/src/components/OptionsSelector/BaseOptionsSelector.js @@ -174,7 +174,7 @@ class BaseOptionsSelector extends Component { { sections: newSections, allOptions: newOptions, - focusedIndex: prevFocusedOptionIndex || _.isNumber(this.props.focusedIndex) ? this.props.focusedIndex : newFocusedIndex, + focusedIndex: prevFocusedOptionIndex || (_.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 From a16983be88a93ea4087b45f774a5c9a4d3a296df Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Thu, 15 Feb 2024 23:45:10 +0700 Subject: [PATCH 3/4] fix remove hardcode --- src/components/CategoryPicker/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/CategoryPicker/index.js b/src/components/CategoryPicker/index.js index a8ff663cebf2..a957e31a9de4 100644 --- a/src/components/CategoryPicker/index.js +++ b/src/components/CategoryPicker/index.js @@ -84,7 +84,7 @@ CategoryPicker.defaultProps = defaultProps; export default withOnyx({ policyCategories: { - key: ({policyID}) => `${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${"062D53707053B5B9"}`, + key: ({policyID}) => `${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${policyID}`, }, policyRecentlyUsedCategories: { key: ({policyID}) => `${ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_CATEGORIES}${policyID}`, From 54a92b65576db5972f5f9c7c5b019b0d51ce9048 Mon Sep 17 00:00:00 2001 From: dukenv0307 Date: Mon, 19 Feb 2024 15:05:09 +0700 Subject: [PATCH 4/4] fix import lib issue --- src/components/OptionsSelector/BaseOptionsSelector.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/OptionsSelector/BaseOptionsSelector.js b/src/components/OptionsSelector/BaseOptionsSelector.js index d4913b4827f7..690897d548ce 100755 --- a/src/components/OptionsSelector/BaseOptionsSelector.js +++ b/src/components/OptionsSelector/BaseOptionsSelector.js @@ -2,7 +2,7 @@ import lodashGet from 'lodash/get'; import PropTypes from 'prop-types'; import React, {Component} from 'react'; import {ScrollView, View} from 'react-native'; -import _, {find, findIndex} from 'underscore'; +import _ from 'underscore'; import ArrowKeyFocusManager from '@components/ArrowKeyFocusManager'; import Button from '@components/Button'; import FixedFooter from '@components/FixedFooter'; @@ -167,8 +167,8 @@ class BaseOptionsSelector extends Component { } const newFocusedIndex = this.props.selectedOptions.length; const isNewFocusedIndex = newFocusedIndex !== this.state.focusedIndex; - const prevFocusedOption = find(newOptions, (option) => this.focusedOption && option.keyForList === this.focusedOption.keyForList); - const prevFocusedOptionIndex = prevFocusedOption ? findIndex(newOptions, (option) => this.focusedOption && option.keyForList === this.focusedOption.keyForList) : undefined; + const prevFocusedOption = _.find(newOptions, (option) => this.focusedOption && option.keyForList === this.focusedOption.keyForList); + const prevFocusedOptionIndex = prevFocusedOption ? _.findIndex(newOptions, (option) => this.focusedOption && option.keyForList === this.focusedOption.keyForList) : undefined; // eslint-disable-next-line react/no-did-update-set-state this.setState( {