[HOLD for payment 2025-01-24] Group chat - First group member is highlighted in contact list and confirmation page

[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.0.82-0
Reproducible in staging?: Yes
Reproducible in production?: No
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: N/A
If this was caught during regression testing, add the test name, ID and link from TestRail: Exp
Email or phone of affected tester (no customers): applausetester+080101kh@applause.expensifail.com
Issue reported by: Applause Internal Team
Device used: Mac 15.0 / Chrome
App Component: Other

Action Performed:

1. Go to staging.new.expensify.com
2. Open FAB > Start chat.
3. Click Add to group on a few members.
4. Click Next.
5. Note that the first member is highlighted.

Expected Result:

The first group member will not be highlighted in contact list and confirmation page (production behavior).

Actual Result:

The first group member is highlighted in contact list and confirmation page.

The same issue also happens in contact list when inviting member to workspace.

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6708758_1736311073680.20250108_123442.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021876949287872433556
• Upwork Job ID: 1876949287872433556
• Last Price Increase: 2025-01-08
• Automatic offers:
• DylanDylann | Contributor | 105680364

Issue Owner

Current Issue Owner: @strepanier03

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

💬 A slack conversation has been started in #expensify-open-source

[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.

[srikarparsi]

Might have something to do with this PR, will check locally

[srikarparsi]

This revert PR did not do the trick

[srikarparsi]

Looking through BaseSelectionList code, going to add the external label in the meanwhile

[melvin-bot]

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

[melvin-bot]

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

[Pujan92]

Seems to be from #54457

[huult]

This is not a regression from #54807. I reverted this PR, and it is still reproducible.

Screen.Recording.2025-01-08.at.21.17.29.mp4

[mollfpr]

I confirm reverting #54457 fixed this issue.

[srikarparsi]

Can also confirm that this seems to be from #54457.

Commenting out this useEffect fixed the issue.

But, this useEffect edited in this PR which also fixed this issue.

And since it was CPed to staging, it's no longer reproducible on staging. Going to close.

[rdipippo]

I can still reproduce this on staging on the confirm chat members page.

[rdipippo]

Proposal

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

On the confirm chat page, the first item in the contact list is always highlighted

What is the root cause of that problem?

We set selectedItemIndex to the first selected index without cheking if we should. This means it is never set to -1 which prevents highlighting.

App/src/components/SelectionList/BaseSelectionList.tsx

Line 318 in e4e9af3

// If `initiallyFocusedOptionKey` is not passed, we fall back to `-1`, to avoid showing the highlight on the first member

App/src/components/SelectionList/BaseSelectionList.tsx

Line 336 in e4e9af3

const selectedItemIndex = useMemo(() => flattenedSections.allOptions.findIndex((option) => option.isSelected), [flattenedSections.allOptions]);

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

Check if initiallyFocusedOptionKey equals empty string on line 336 - if it does, set the selected index to -1

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

Create a test that passes in initiallyFocusedOptionKey set to empty string.

What alternative solutions did you explore? (Optional)

N/A
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.

[mitarachim]

Re-open due to QA team can still reproduce this issue in build v9.0.82-4

20250109_141530.mp4

[srikarparsi]

Hm, thanks for pointing this out. Removing the same useEffect also fixes this issue so it also looks like it's coming from this PR. @daledah are you available to put up a fix?

[mollfpr]

@srikarparsi I think the C+ from the original PR should review the fix too. cc @DylanDylann

[srikarparsi]

Yup, looks like they'll address it in a follow up. Going to assign @DylanDylann and @daledah to this issue.

[melvin-bot]

📣 @DylanDylann 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[srikarparsi]

Just for clarification later, I don't believe this issue should receive payment since it is being fixed as a follow up from this PR.

[srikarparsi]

Closing this issue since it has been fixed in this PR and it doesn't need payment since it was a regression.

[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 9.0.86-3 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• fix: first item is highlighted in contact list and confirmation page #55154

If no regressions arise, payment will be issued on 2025-01-24. 🎊

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

• @DylanDylann requires payment automatic offer (Contributor)

[melvin-bot]

@DylanDylann @strepanier03 @DylanDylann The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]