[$250] 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. Note that the first member is highlighted.
5. Click Next.
6. Note that the first member is also 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

Issue Owner

Current Issue Owner: @mollfpr

[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

[Shahidullah-Muffakir]

Regression from #54807

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