[$250] Reports - "undefinedundefined" is shown briefly when switching group-by from "From" to "Card"

[mitarachim]

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.15-9
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: #67802
Email or phone of affected tester (no customers): sjdniojsdoisjo@gmail.com
Issue reported by: Applause Internal Team
Device used: Mac 15.5 / Chrome
App Component: Search

Action Performed:

1. Go to staging.new.expensify.com
2. Go to workspace chat.
3. Create an expense in workspace chat.
4. Go to Reports > Expenses.
5. Search with group-by:from.
6. Click Group-by button.
7. Select Card and click Apply.

Expected Result:

The subtitle below user name will not show "undefinedundefined" when switching group-by from "From" to "Card".

Actual Result:

The subtitle below user name shows "undefinedundefined" briefly when switching group-by from "From" to "Card".

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

Bug6948105_1758198902155.Screen_Recording_2025-09-18_at_20.26.28.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021970487701513069863
• Upwork Job ID: 1970487701513069863
• Last Price Increase: 2025-09-23

Issue Owner

Current Issue Owner: @dominictb

[melvin-bot]

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

[nyomanjyotisa]

Proposal

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

Reports - "undefinedundefined" is shown briefly when switching group-by from "From" to "Card"

What is the root cause of that problem?

Subtitle text concatenation doesn't handle undefined values properly

App/src/components/SelectionList/Search/CardListItemHeader.tsx

Line 82 in e2e05b5

text={`${cardItem.cardName}${cardItem.lastFourPAN ? ` ${CONST.DOT_SEPARATOR} ` : ''}${cardItem.lastFourPAN}`}

When switching from "From" to "Card" grouping, there's a brief moment during data reconstruction where cardItem.cardName and cardItem.lastFourPAN might be undefined

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

We should add proper null/undefined checks

                                text={`${cardItem.cardName ?? ''}${cardItem.lastFourPAN ? ` ${CONST.DOT_SEPARATOR} ` : ''}${cardItem.lastFourPAN ?? ''}`}

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)

None

[lorretheboy]

Proposal

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

"undefinedundefined" is shown briefly when switching group-by from "From" to "Card"

What is the root cause of that problem?

We cast data[key] as SearchCardGroup, but during the transition, data[key] is actually a SearchMemberGroup (from the "From" grouping). This type assertion is unsafe and causes the undefined properties

App/src/libs/SearchUIUtils.ts

Lines 1442 to 1445 in 353237f

	for (const key in data) {
	if (isGroupEntry(key)) {
	const memberGroup = data[key] as SearchMemberGroup;
	const personalDetails = data.personalDetailsList[memberGroup.accountID];

App/src/libs/SearchUIUtils.ts

Lines 1477 to 1480 in 353237f

	for (const key in data) {
	if (isGroupEntry(key)) {
	const cardGroup = data[key] as SearchCardGroup;
	const personalDetails = data.personalDetailsList[cardGroup.accountID];

App/src/libs/SearchUIUtils.ts

Line 1515 in 353237f

const withdrawalIDGroup = data[key] as SearchWithdrawalIDGroup;

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

We should check if it valid data before continue (We can use existing util func to check if having, however, I couldn't find out them so I check manually)

            const groupEntry = data[key];

            if (!('accountID' in groupEntry) || ('cardID' in groupEntry) || ('entryID' in groupEntry)) {
                continue;
            }

            const memberGroup = groupEntry;



....


            const groupEntry = data[key];

            if (!('cardID' in groupEntry) || !('cardName' in groupEntry) || !('lastFourPAN' in groupEntry)) {
                continue;
            }

            const cardGroup = groupEntry;

....

            const groupEntry = data[key];

            if (!('entryID' in groupEntry) || !('bankName' in groupEntry)) {
                continue;
            }

            const withdrawalIDGroup = groupEntry;

Optional: Though we have fixed the root cause of issue, we still can have better null/undefined check here as well if needed

App/src/components/SelectionList/Search/CardListItemHeader.tsx

Line 82 in 353237f

text={`${cardItem.cardName}${cardItem.lastFourPAN ? ` ${CONST.DOT_SEPARATOR} ` : ''}${cardItem.lastFourPAN}`}

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

NA

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.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~021970487701513069863

[melvin-bot]

Triggered auto assignment to Contributor-plus team member for initial proposal review - @dominictb (External)