diff --git a/src/components/TagPicker/index.js b/src/components/TagPicker/index.js index 37e52d3aca0c..d6d49e3fe288 100644 --- a/src/components/TagPicker/index.js +++ b/src/components/TagPicker/index.js @@ -11,7 +11,7 @@ import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import {defaultProps, propTypes} from './tagPickerPropTypes'; -function TagPicker({selectedTag, tag, policyTags, policyRecentlyUsedTags, onSubmit}) { +function TagPicker({selectedTag, tag, policyTags, policyRecentlyUsedTags, onSubmit, shouldShowDisabledAndSelectedOption}) { const styles = useThemeStyles(); const {translate} = useLocalize(); const [searchValue, setSearchValue] = useState(''); @@ -48,10 +48,18 @@ function TagPicker({selectedTag, tag, policyTags, policyRecentlyUsedTags, onSubm return 0; }, [policyTagList, selectedOptions, isTagsCountBelowThreshold]); + const enabledTags = useMemo(() => { + if (!shouldShowDisabledAndSelectedOption) { + return policyTagList; + } + const selectedNames = _.map(selectedOptions, (s) => s.name); + const tags = [...selectedOptions, ..._.filter(policyTagList, (policyTag) => policyTag.enabled && !selectedNames.includes(policyTag.name))]; + return tags; + }, [selectedOptions, policyTagList, shouldShowDisabledAndSelectedOption]); + const sections = useMemo( - () => - OptionsListUtils.getFilteredOptions({}, {}, [], searchValue, selectedOptions, [], false, false, false, {}, [], true, policyTagList, policyRecentlyUsedTagsList, false).tagOptions, - [searchValue, selectedOptions, policyTagList, policyRecentlyUsedTagsList], + () => OptionsListUtils.getFilteredOptions({}, {}, [], searchValue, selectedOptions, [], false, false, false, {}, [], true, enabledTags, policyRecentlyUsedTagsList, false).tagOptions, + [searchValue, enabledTags, selectedOptions, policyRecentlyUsedTagsList], ); const headerMessage = OptionsListUtils.getHeaderMessageForNonUserList(lodashGet(sections, '[0].data.length', 0) > 0, searchValue); diff --git a/src/components/TagPicker/tagPickerPropTypes.js b/src/components/TagPicker/tagPickerPropTypes.js index 3010ab24a9c1..1221c939b940 100644 --- a/src/components/TagPicker/tagPickerPropTypes.js +++ b/src/components/TagPicker/tagPickerPropTypes.js @@ -20,11 +20,15 @@ const propTypes = { /** List of recently used tags */ policyRecentlyUsedTags: PropTypes.objectOf(PropTypes.arrayOf(PropTypes.string)), + + /** Should show the selected option that is disabled? */ + shouldShowDisabledAndSelectedOption: PropTypes.bool, }; const defaultProps = { policyTags: {}, policyRecentlyUsedTags: {}, + shouldShowDisabledAndSelectedOption: false, }; export {propTypes, defaultProps}; diff --git a/src/pages/EditRequestTagPage.js b/src/pages/EditRequestTagPage.js index 6191c8fb8dd8..52b0fea01395 100644 --- a/src/pages/EditRequestTagPage.js +++ b/src/pages/EditRequestTagPage.js @@ -46,6 +46,7 @@ function EditRequestTagPage({defaultTag, policyID, tagName, onSubmit}) { tag={tagName} policyID={policyID} onSubmit={selectTag} + shouldShowDisabledAndSelectedOption /> );