Expense - No tag subheader "Select a tag to better organize your spend" in Tag field

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: v9.2.92-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack: https://test-management.browserstack.com/projects/2219752/test-runs/TR-2649/folder/13176676/41237297/1103831971
Email or phone of affected tester (no customers): N/A
Issue reported by: Applause Internal Team
Bug source: Regression TC Execution
Device used: Pixel 7 Pro /Android 16
App Component: Chat Report View

Action Performed:

Precondition: Admin has added some Tags in the Workspace

1. Navigate to Collect Workspace > Tags
2. Click on the Settings option
3. Click on the custom tag name field
4. Enter a custom name for tags (e.g Departments)
5. Start a money request in the workspace chat and reach the tag field
6. Click on the tag field

Expected Result:

Verify the subheader says "Select a tag to better organize your spend."

Actual Result:

No tag subheader

Workaround:

Unknown

Platforms:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari

Screenshots/Videos

Bug7040813_1767409942767.tag.mp4

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @stephanieelliott (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[samranahm]

Please re-state the problem that we are trying to solve in this issue.

When clicking the tag field in a money request, there should be a subheader text (e.g., "Select a tag to better organize your spend") below the page title. This subheader appears correctly when the default tag name "Tags" is used, but disappears when a workspace has custom tag names like "Departments", "Projects", etc.

What is the root cause of that problem?

The TagPicker component in TagPicker.tsx does not display any header content or subtitle. Unlike other similar picker components that show helpful descriptive text to guide users, TagPicker only renders a SelectionList without utilizing the headerContent prop available in SelectionList.

The SelectionList component supports a headerContent prop for displaying custom header content (like descriptive text), but TagPicker never provides this content. This means users don't see any guidance text explaining the purpose of tags when selecting them, regardless of whether custom tag names are used or not.

App/src/components/TagPicker.tsx

Lines 139 to 150 in f7265ef

	<SelectionList
	ListItem={RadioListItem}
	sectionTitleStyles={styles.mt5}
	listItemTitleStyles={styles.breakAll}
	sections={sections}
	textInputValue={searchValue}
	headerMessage={headerMessage}
	textInputLabel={shouldShowTextInput ? translate('common.search') : undefined}
	initiallyFocusedOptionKey={selectedOptionKey}
	onChangeText={setSearchValue}
	onSelectRow={onSubmit}
	/>

What changes do you think we should make in order to solve the problem?

We need to add header content to the TagPicker component that displays a descriptive subtitle using the custom tag list name.

Add translation keys for the tag picker subtitle in all locals

In src/languages/en.ts, add after the existing subtitle key:

tagPickerSubtitle: ({tagName}: {tagName: string}) => `Select ${tagName} to better organize your spend.`,

In TagPicker.tsx, create the header content and pass it to SelectionList:

Before the return statement, add:

const headerContent = useMemo(
    () => (
        <View style={[styles.ph5, styles.pb3]}>
            <Text style={[styles.textSupporting, styles.mt1]}>
                {translate('workspace.tags.tagPickerSubtitle', {tagName: tagListName.toLowerCase()})}
            </Text>
        </View>
    ),
    [styles, translate, tagListName],
);

Then add the headerContent prop to the SelectionList:

<SelectionList
    ListItem={RadioListItem}
    headerContent={headerContent}
    // ... rest of props
/>

App/src/components/TagPicker.tsx

Lines 139 to 142 in f7265ef

	<SelectionList
	ListItem={RadioListItem}
	sectionTitleStyles={styles.mt5}
	listItemTitleStyles={styles.breakAll}

We can update copy, styling as needed.

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[lorretheboy]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Expense - No tag subheader "Select a tag to better organize your spend" in Tag field

What is the root cause of that problem?

We haven't handled this scenario before

App/src/pages/iou/request/step/IOURequestStepTag.tsx

Lines 193 to 203 in f7398c8

	{!!shouldShowTag && (
	<TagPicker
	policyID={policyID}
	tagListName={policyTagListName}
	tagListIndex={tagListIndex}
	selectedTag={tag}
	transactionTag={transactionTag}
	hasDependentTags={hasDependentTags}
	onSubmit={updateTag}
	/>
	)}

What changes do you think we should make in order to solve the problem?

Add trans (Translation can be adjusted based on product team's requirement)

        chooseATag: 'Select a tag to better organize your spend.',

Add sub-header above TagPicker

                <>
                    <Text style={[styles.mh5, styles.mv4]}>{translate('iou.chooseATag')}</Text> // Styles can be updated in PR phase
                    <TagPicker
                        policyID={policyID}
                        tagListName={policyTagListName}
                        tagListIndex={tagListIndex}
                        selectedTag={tag}
                        transactionTag={transactionTag}
                        hasDependentTags={hasDependentTags}
                        onSubmit={updateTag}
                    />
                </>

App/src/pages/iou/request/step/IOURequestStepTag.tsx

Lines 194 to 202 in f7398c8

	<TagPicker
	policyID={policyID}
	tagListName={policyTagListName}
	tagListIndex={tagListIndex}
	selectedTag={tag}
	transactionTag={transactionTag}
	hasDependentTags={hasDependentTags}
	onSubmit={updateTag}
	/>

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[Eskalifer1]

I think this is expected based on this PR: #77824

cc: @stephanieelliott

[stephanieelliott]

Oh, good catch @Eskalifer1 - thank you!