diff --git a/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js b/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js index 36d424ea28f2..85939eb3b773 100755 --- a/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js +++ b/src/components/MoneyTemporaryForRefactorRequestConfirmationList.js @@ -799,7 +799,7 @@ function MoneyTemporaryForRefactorRequestConfirmationList({ {shouldShowTags && ( diff --git a/src/components/ReportActionItem/MoneyRequestView.js b/src/components/ReportActionItem/MoneyRequestView.js index 4c727439b876..3121328138ee 100644 --- a/src/components/ReportActionItem/MoneyRequestView.js +++ b/src/components/ReportActionItem/MoneyRequestView.js @@ -350,7 +350,7 @@ function MoneyRequestView({report, parentReport, parentReportActions, policyCate } */ function getTagsOptions(tags) { - return _.map(tags, (tag) => ({ - text: tag.name, - keyForList: tag.name, - searchText: tag.name, - tooltipText: tag.name, - isDisabled: !tag.enabled, - })); + return _.map(tags, (tag) => { + // This is to remove unnecessary escaping backslash in tag name sent from backend. + const cleanedName = PolicyUtils.getCleanedTagName(tag.name); + return { + text: cleanedName, + keyForList: tag.name, + searchText: tag.name, + tooltipText: cleanedName, + isDisabled: !tag.enabled, + }; + }); } /** * Build the section list for tags * - * @param {Object[]} rawTags + * @param {Object[]} tags * @param {String} tags[].name * @param {Boolean} tags[].enabled * @param {String[]} recentlyUsedTags @@ -967,14 +972,8 @@ function getTagsOptions(tags) { * @param {Number} maxRecentReportsToShow * @returns {Array} */ -function getTagListSections(rawTags, recentlyUsedTags, selectedOptions, searchInputValue, maxRecentReportsToShow) { +function getTagListSections(tags, recentlyUsedTags, selectedOptions, searchInputValue, maxRecentReportsToShow) { const tagSections = []; - const tags = _.map(rawTags, (tag) => { - // This is to remove unnecessary escaping backslash in tag name sent from backend. - const tagName = tag.name && tag.name.replace(/\\{1,2}:/g, ':'); - - return {...tag, name: tagName}; - }); const sortedTags = sortTags(tags); const enabledTags = _.filter(sortedTags, (tag) => tag.enabled); const numberOfTags = _.size(enabledTags); @@ -999,7 +998,7 @@ function getTagListSections(rawTags, recentlyUsedTags, selectedOptions, searchIn } if (!_.isEmpty(searchInputValue)) { - const searchTags = _.filter(enabledTags, (tag) => tag.name.toLowerCase().includes(searchInputValue.toLowerCase())); + const searchTags = _.filter(enabledTags, (tag) => PolicyUtils.getCleanedTagName(tag.name.toLowerCase()).includes(searchInputValue.toLowerCase())); tagSections.push({ // "Search" section diff --git a/src/libs/PolicyUtils.ts b/src/libs/PolicyUtils.ts index ec7346e26f80..b8ed62f93082 100644 --- a/src/libs/PolicyUtils.ts +++ b/src/libs/PolicyUtils.ts @@ -195,6 +195,13 @@ function getTagList(policyTags: OnyxCollection, tagKey: string) { return policyTags?.[policyTagKey]?.tags ?? {}; } +/** + * Cleans up escaping of colons (used to create multi-level tags, e.g. "Parent: Child") in the tag name we receive from the backend + */ +function getCleanedTagName(tag: string) { + return tag?.replace(/\\{1,2}:/g, ':'); +} + function isPendingDeletePolicy(policy: OnyxEntry): boolean { return policy?.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE; } @@ -221,6 +228,7 @@ export { getTag, getTagListName, getTagList, + getCleanedTagName, isPendingDeletePolicy, isPolicyMember, isPaidGroupPolicy,