Group - Selected members are not highlighted

[izarutskaya]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: v1.4.63-0
Reproducible in staging?: Y
Reproducible in production?: N
Email or phone of affected tester (no customers): [email protected]
Logs: https://stackoverflow.com/c/expensify/questions/4856
Issue reported by: Applause-Internal team

Action Performed:

1. Click on ‘FAB’ > Start chat
2. Select multiple users > Click on ‘Next’ button

Expected Result:

Selected users should be highlighted

Actual Result:

Selected user are not highlighted and members list UI is different from production. It looks like the older version of the page.

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

Bug6453283_1713425266426.Screen_Recording_2024-04-18_at_10.15.49_in_the_morning.mp4

View all open jobs on GitHub

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @joekaufmanexpensify (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]

@joekaufmanexpensify 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-04-18.14-43-54-695.mp4

[MahmudjonToraqulov]

Proposal

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

Group - Selected members are not highlighted.

What is the root cause of that problem?

Some styles are wrong.

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

We should add " pressableStyle={[[styles.selectionListPressableItemWrapper, item.isSelected && styles.activeComponentBG, isFocused && styles.sidebarLinkActive]]}" here:

App/src/components/SelectionList/InviteMemberListItem.tsx

Line 51 in 9b839f4

item={item}

And "containerStyle={styles.mb3}" here:

App/src/components/SelectionList/InviteMemberListItem.tsx

Line 53 in 9b839f4

isFocused={isFocused}

Remove "styles.optionRow" here:

App/src/components/SelectionList/InviteMemberListItem.tsx

Line 95 in 9b839f4

<View style={[styles.flex1, styles.flexColumn, styles.justifyContentCenter, styles.alignItemsStretch, styles.optionRow]}>

And update wrapperStyle like that -> wrapperStyle={[styles.flexRow, styles.flex1, styles.justifyContentBetween, styles.userSelectNone, styles.alignItemsCenter]} here:

App/src/components/SelectionList/InviteMemberListItem.tsx

Line 52 in 9b839f4

wrapperStyle={[styles.flex1, styles.justifyContentBetween, styles.sidebarLinkInner, styles.userSelectNone, styles.peopleRow, isFocused && styles.sidebarLinkActive]}

What alternative solutions did you explore? (Optional)

Just update InviteMemberListItem with TableListItem here:

App/src/pages/NewChatConfirmPage.tsx

Line 153 in 9b839f4

ListItem={InviteMemberListItem}

Result

2024-04-18.18-26-54.mp4

[joekaufmanexpensify]

I don't think this is a bug. Here is the mockup from the design doc which matches the UI shown above on staging.

[joekaufmanexpensify]

cc @amyevans, unless you disagree, IMO we should close this, it seems intended.

[amyevans]

Yes, agreed this looks like an intentional change. I also see the Group Chats PR went through design review so it would've been caught there if not intended. Closing!