[HOLD for payment 2024-06-11] [HOLD for payment 2024-06-06] [$250] Chat - Display Name Appears Black and Members Not Ticked in Group Preview

[izarutskaya]

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: v1.4.77-0
Reproducible in staging?: Y
Reproducible in production?: N
Email or phone of affected tester (no customers): abebemiherat@gmail.com
Logs: https://stackoverflow.com/c/expensify/questions/4856
Issue reported by: Applause-Internal team

Action Performed:

1, Navigate to FAB > Start Chat > Click on the "Add to Group" button associated with the email.
2, Notice that the display name appears black and the selected members are not ticked; the "Add to Group" button remains available.

Expected Result:

Upon creating a group and clicking the "Add to Group" button, the display name should not appear black, and the "Add to Group" button should change to a tick.

Actual Result:

Clicking the "Add to Group" button results in the display name appearing black, and the "Add to Group" button remains available without changing to a tick, contacts are hidden on the confirmation page and an error appears if you click Start group

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6494991_1716979766131.Screen_Recording_2024-05-29_at_3.38.36_AM.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01e4959f53301769e3
• Upwork Job ID: 1795854006851895296
• Last Price Increase: 2024-05-29
• Automatic offers:
• abdulrahuman5196 | Reviewer | 102517509
• Krishna2323 | Contributor | 102517511

Issue Owner

Current Issue Owner: @CortneyOfstad

[melvin-bot]

Triggered auto assignment to @Beamanator (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

[melvin-bot]

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

[github-actions]

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

1. Identify the pull request that introduced this issue and revert it.
2. Find someone who can quickly fix the issue.
3. Fix the issue yourself.

[izarutskaya]

@CortneyOfstad I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors.

[izarutskaya]

We think this issue might be related to the #vip-vsb.

[izarutskaya]

Production

bandicam.2024-05-29.14-21-36-911.mp4

[melvin-bot]

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

[melvin-bot]

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

[Krishna2323]

Proposal

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

Chat - Display Name Appears Black and Members Not Ticked in Group Preview

What is the root cause of that problem?

Offending PR: #42170

The rightHandSideComponent function is already called here so it isn't passes as a function to ListItem.

App/src/components/SelectionList/BaseSelectionList.tsx

Line 430 in c7cf7d1

rightHandSideComponent={rightHandSideComponent && (typeof rightHandSideComponent === 'function' ? rightHandSideComponent({} as TItem) : rightHandSideComponent)}

App/src/components/SelectionList/BaseListItem.tsx

Lines 45 to 55 in c7cf7d1

	const rightHandSideComponentRender = () => {
	if (canSelectMultiple || !rightHandSideComponent) {
	return null;
	}
	if (typeof rightHandSideComponent === 'function') {
	return rightHandSideComponent(item);
	}
	return rightHandSideComponent;
	};

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

We have two options:

1. Pass the rightHandSideComponent as it is, without calling it and conditions.

rightHandSideComponent={rightHandSideComponent}

2. When calling rightHandSideComponent in BaseSelectionList, pass the item (option).

rightHandSideComponent={rightHandSideComponent && (typeof rightHandSideComponent === 'function' ? rightHandSideComponent(item) : rightHandSideComponent)}

We need to also remove the comment which was added in the offending PR.

I have checked lint issue mentioned in the offending PR, we can safely switch back to rightHandSideComponent={rightHandSideComponent}

What alternative solutions did you explore? (Optional)

[Krishna2323]

Proposal Updated

• Comment added

[luacmartins]

@Krishna2323 are you available to work on a fix?

[Krishna2323]

@luacmartins, yep.

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.4.77-11 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• [CP Staging] fix: Chat - Display Name Appears Black and Members Not Ticked in Group Preview #42805

If no regressions arise, payment will be issued on 2024-06-06. 🎊

For reference, here are some details about the assignees on this issue:

• @abdulrahuman5196 requires payment automatic offer (Reviewer)
• @Krishna2323 requires payment automatic offer (Contributor)

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@abdulrahuman5196] The PR that introduced the bug has been identified. Link to the PR:
• [@abdulrahuman5196] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
• [@abdulrahuman5196] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
• [@abdulrahuman5196] Determine if we should create a regression test for this bug.
• [@abdulrahuman5196] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@CortneyOfstad] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.4.78-5 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• [CP Staging] fix: Chat - Display Name Appears Black and Members Not Ticked in Group Preview #42805

If no regressions arise, payment will be issued on 2024-06-11. 🎊

For reference, here are some details about the assignees on this issue:

• @abdulrahuman5196 requires payment automatic offer (Reviewer)
• @Krishna2323 requires payment automatic offer (Contributor)

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@abdulrahuman5196] The PR that introduced the bug has been identified. Link to the PR:
• [@abdulrahuman5196] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
• [@abdulrahuman5196] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
• [@abdulrahuman5196] Determine if we should create a regression test for this bug.
• [@abdulrahuman5196] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@CortneyOfstad] Link the GH issue for creating/updating the regression test once above steps have been agreed upon: https://github.com/Expensify/Expensify/issues/403908

[CortneyOfstad]

Not overdue!

@abdulrahuman5196 can you complete the checklist at your earliest convenience so there is not a delay in issuing payment? Thanks!

[CortneyOfstad]

Friendly bump @abdulrahuman5196 as payment is set for tomorrow. Thanks!

[abdulrahuman5196]

The PR that introduced the bug has been identified. Link to the PR:
The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:

https://github.com/Expensify/App/pull/42170/files#r1633446096

Determine if we should create a regression test for this bug.

Yes.

If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.

1. Navigate to FAB > Start Chat > Click on the "Add to Group" button associated with the email.
2. Verify that the display name appears correctly and the selected members are ticked.

@CortneyOfstad

[CortneyOfstad]

Payment Summary

@abdulrahuman5196 — paid $250 via Upwork
@Krishna2323 — paid $250 via Upwork