Room - A second checkmark is briefly visible after selecting a member of the room.

[jponikarchuk]

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.3.17.5
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack: https://test-management.browserstack.com/projects/2219752/test-runs/TR-4999/folder/13176685/41236613/1183037852
Email or phone of affected tester (no customers): ibellicotest+2250@gmail.com
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: Motorola MotoG60 / Android 12 (Hybrid app)
App Component: Other

Action Performed:

1. Open the Expensify app.
2. Navigate to a private room conversation or create one if necessary.
3. If the room has no members, invite at least one.
4. Tap on room header.
5. Tap on "Members"
6. Long tap and select any member.
7. Note that when member is selected, a second checkmark is briefly visible on the right side before checkmark on the left side appears.

Expected Result:

When a member of the room is selected, only a checkmark on the left side should be visible.

Actual Result:

When a member of a room is selected, a second checkmark is briefly visible on the right side, before checkmark on the left appears.

Workaround:

Unknown

Platforms:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari

Screenshots/Videos

1.mp4

View all open jobs on GitHub

[daledah]

Proposal

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

When a member of a room is selected, a second checkmark is briefly visible on the right side, before checkmark on the left appears.

What is the root cause of that problem?

The issue is in the turnOnSelectionMode function in SelectionListWithModal/index.tsx.

When the user taps "Select" from the modal:

1. turnOnMobileSelectionMode() is called - this triggers an async Onyx update
2. onTurnOnSelectionMode(longPressedItem) is called - this immediately sets item.isSelected = true

This creates a brief render state where:

• item.isSelected = true (already updated synchronously)
• canSelectMultiple = false (Onyx hasn't updated yet)

In BaseListItem.tsx, the right checkmark is shown when !canSelectMultiple && item.isSelected is true. So during this transition state, the right checkmark briefly appears before canSelectMultiple becomes true and the left checkbox takes over.

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

We should call onTurnOnSelectionMode before turnOnMobileSelectionMode so that item selection happens before the selection mode is enabled. This ensures both state changes happen in a single render cycle.

--- a/src/components/SelectionListWithModal/index.tsx
+++ b/src/components/SelectionListWithModal/index.tsx
@@ -96,11 +96,11 @@ function SelectionListWithModal<TItem extends ListItem>({
     };
 
     const turnOnSelectionMode = () => {
-        turnOnMobileSelectionMode();
         setIsModalVisible(false);
 
         if (onTurnOnSelectionMode) {
             onTurnOnSelectionMode(longPressedItem);
         }
+        turnOnMobileSelectionMode();
     };

What alternative solutions did you explore? (Optional)

Another approach would be to add an additional condition in BaseListItem.tsx to prevent the right checkmark from showing during the transition state. However, fixing the order of operations in SelectionListWithModal is a cleaner solution that addresses the root cause directly.

[Eskalifer1]

Proposal

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

Room - A second checkmark is briefly visible after selecting a member of the room.

What is the root cause of that problem?

When selecting a row, this part of the code is executed:

App/src/pages/RoomMembersPage.tsx

Lines 206 to 210 in 33d2905

	if (selectedMembers.includes(accountID)) {
	removeUser(accountID);
	} else {
	addUser(accountID);
	}

Namely, this function:

App/src/pages/RoomMembersPage.tsx

Lines 178 to 186 in 33d2905

	/**
	* Add user from the selectedMembers list
	*/
	const addUser = useCallback(
	(accountID: number) => {
	setSelectedMembers((prevSelected) => [...prevSelected, accountID]);
	},
	[setSelectedMembers],
	);

Which, as you can see, sets selectedMembers, based on which it is calculated whether the element is isSelected:

App/src/pages/RoomMembersPage.tsx

Line 300 in 33d2905

isSelected: selectedMembers.includes(accountID),

Here is the function that enables selectionMode:

App/src/components/SelectionListWithModal/index.tsx

Lines 107 to 114 in 19f5c79

	const turnOnSelectionMode = () => {
	turnOnMobileSelectionMode();
	setIsModalVisible(false);
	if (onTurnOnSelectionMode) {
	onTurnOnSelectionMode(longPressedItem);
	}
	};

And here's the problem, which is most noticeable on Android, because of the specifics of the platform, and very often it is on Android that bugs related to Onyx are noticeable, namely with its data updates, and this case is also an example, because turnOnMobileSelectionMode changes the key in Onyx, while onTurnOnSelectionMode is executed synchronously, resulting in a small time gap during which the item is already selected (synchronous state), but canSelectMultiple still has a value of false.

We have had bugs related to Onyx on our project more than once, specifically on Android, due to the fact that Onyx and synchronous state updates occur at different times, but on other platforms, due to their specifics, this can occur within a single update, resulting in this gap not being visible.

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

We need to use the same approach that we use on the participants page. When we know that it will be possible to select multiple items, isSelected should only be applied when canSelectMultiple === true. Here is an example of the code:

App/src/pages/ReportParticipantsPage.tsx

Line 238 in 19f5c79

isSelected: selectedMembers.includes(accountID) && canSelectMultiple,

The same logic should be repeated here, and don't forget to add this variable to the dependencies:

App/src/pages/RoomMembersPage.tsx

Line 300 in 19f5c79

isSelected: selectedMembers.includes(accountID),

PS: This check can be added lower down in the component tree if we decide it is necessary.

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.

[truph01]

Proposal

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

• When selecting a room member via long press, a second checkmark briefly appears on the right side before the intended checkmark on the left is shown.

What is the root cause of that problem?

• When a member is long-pressed to enter selection mode, the following two actions are triggered:

  • Turning on selection mode via Onyx.merge:
    

    App/src/components/SelectionListWithModal/index.tsx

    Line 108 in f216609

    turnOnMobileSelectionMode();

  • Marking the member as selected via setState:
    

    App/src/components/SelectionListWithModal/index.tsx

    Line 112 in f216609

    onTurnOnSelectionMode(longPressedItem);

• The setState update happens immediately, but the Onyx.merge call takes slightly longer to complete.

• During this short delay (while selection mode is not yet fully enabled), the default right-hand-side checkmark is displayed due to this logic:
  

  App/src/components/SelectionList/ListItem/BaseListItem.tsx

  Line 85 in f216609

  const shouldShowCheckmark = !canSelectMultiple && !!item.isSelected && !rightHandSideComponent && shouldUseDefaultRightHandSideCheckmark;

This results in a brief flicker where two checkmarks are shown sequentially.

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

• We can disable the default right-hand-side checkmark for this screen by passing: shouldUseDefaultRightHandSideCheckmark={false}
  

  App/src/pages/RoomMembersPage.tsx

  Line 460 in f216609

  <SelectionListWithModal

  Since this screen never requires the right-hand-side checkmark, disabling it prevents the flicker entirely.

What alternative solutions did you explore? (Optional)