[Due for payment 2025-10-15] [$250] Expense - Avatar is not displayed next to the selected attendee

[nlemma]

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: 9.2.1-0
Reproducible in staging?: Yes
Reproducible in production?: No
If this was caught during regression testing, add the test name, ID and link from TestRail: https://test-management.browserstack.com/projects/2219752/test-runs/TR-645/41236908/874218196?q=attendee&issue_type=jira
Email or phone of affected tester (no customers): dssoinjsoisdjoi@gmail.com
Issue reported by: Applause Internal Team
Device used: Mac 15.5 / Chrome
App Component: Money Requests

Action Performed:

Precondition:

• Rules are enabled.
• "Attendee tracking" is enabled in workspace settings > Rules.

1. Go to staging.expensify.com
2. Go to workspace chat.
3. Click + > Create expense > Manual.
4. Enter amount > Next.
5. On confirm page, enter merchant and select category.
6. Click Attendees field.
7. Enter a random name and select the user.
8. Click Save.
9. Click Create expense.
10. Open the transaction thread.
11. Click Attendees field.

Expected Result:

Fallback avatar will be displayed next to the selected attendee.

Actual Result:

Avatar is not displayed next to the selected attendee.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6933939_1756877089932.Screen_Recording_2025-09-03_at_13.20.04.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021968293448193698988
• Upwork Job ID: 1968293448193698988
• Last Price Increase: 2025-09-17
• Automatic offers:
• daledah | Contributor | 108879563

Issue Owner

Current Issue Owner: @eVoloshchak

[melvin-bot]

Triggered auto assignment to @adelekennedy (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.

[daledah]

Proposal

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

Avatar is not displayed next to the selected attendee.

What is the root cause of that problem?

For random name attendees, there's no reportID and accountID, so the avatar is not displayed here

App/src/components/SelectionList/InviteMemberListItem.tsx

Line 109 in 83a172d

{(!!item.reportID || !!accountID) && (

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

Since we already has fallback avatar for nonexistent accountID, we can expand the condition here:

App/src/components/SelectionList/InviteMemberListItem.tsx

Line 109 in 83a172d

{(!!item.reportID || !!accountID) && (

{(!!item.reportID || !!accountID || !!item.text || !!item.alternateText) && (

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

None

What alternative solutions did you explore? (Optional)

NA

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.

[ganzz4]

Proposal

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

Avatar is not displayed next to the selected attendee when a random name (non-existing user) is entered in the attendees field of a transaction.

What is the root cause of that problem?

For random name attendees, there's no reportID and accountID, so the avatar is not displayed due to the conditional rendering in InviteMemberListItem.tsx:

App/src/components/SelectionList/InviteMemberListItem.tsx

Lines 109 to 123 in db76e19

	{(!!item.reportID || !!accountID) && (
	<ReportActionAvatars
	subscriptAvatarBorderColor={hovered && !isFocused ? hoveredBackgroundColor : subscriptAvatarBorderColor}
	shouldShowTooltip={showTooltip}
	secondaryAvatarContainerStyle={[
	StyleUtils.getBackgroundAndBorderStyle(theme.sidebar),
	isFocused ? StyleUtils.getBackgroundAndBorderStyle(focusedBackgroundColor) : undefined,
	hovered && !isFocused ? StyleUtils.getBackgroundAndBorderStyle(hoveredBackgroundColor) : undefined,
	]}
	fallbackDisplayName={item.text ?? item.alternateText ?? undefined}
	singleAvatarContainerStyle={[styles.actionAvatar, styles.mr3]}
	reportID={item.reportID}
	accountIDs={accountID ? [accountID] : undefined}
	/>
	)}

When users enter a random name that doesn't correspond to an existing user, both item.reportID and accountID are undefined, causing the entire ReportActionAvatars component to not render.

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

Remove the conditional rendering and always show the ReportActionAvatars component:

<ReportActionAvatars

App/src/components/SelectionList/InviteMemberListItem.tsx

Lines 109 to 110 in db76e19

	{(!!item.reportID || !!accountID) && (
	<ReportActionAvatars

This approach leverages the existing fallback mechanism in ReportActionAvatars which already has comprehensive logic for handling cases where no accountID or reportID is provided. The component will automatically display a fallback avatar using the fallbackDisplayName prop.

Important Context: This conditional rendering was initially added in PR #67913 to fix deploy blockers. However, PR #68015 later introduced improved fallback avatar mechanisms, making this condition unnecessary. I have tested all potential regressions mentioned in the original PR #67913 and confirmed that removing this condition does not break any existing functionality. The fallback system now handles all edge cases properly.

Note: We could also review other components for similar conditional rendering issues to ensure consistent avatar display behavior.

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

1. Random name attendee test: Verify that when a random name (non-existing user) is added as an attendee, a fallback avatar is displayed in the attendee list.

2. Existing user attendee test: Verify that existing users continue to show their profile avatars correctly.

What alternative solutions did you explore? (Optional)

Result:

fix.mp4

[melvin-bot]

@adelekennedy Eep! 4 days overdue now. Issues have feelings too...

[melvin-bot]

Triggered auto assignment to @heyjennahay (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.