[HOLD for payment 2024-02-22] [$250] Workspace - Workspace highlighted member blinks when check/uncheck mark

[lanitochka17]

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: 1.4.36-0
Reproducible in staging?: Y
Reproducible in production?: N
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers): gocemate@gmail.com
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: Applause - Internal Team
Slack conversation:

Action Performed:

1. Navigate to Workspace> Members
2. Check mark any member (Admin should not be the first on the list)

Expected Result:

Selected member should not blink

Actual Result:

Workspace member blinks when check/uncheck mark

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

Add any screenshot/video evidence

Bug6366038_1706972862809.Recording__2048.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01faff94e6cefb944b
• Upwork Job ID: 1754496368396689408
• Last Price Increase: 2024-02-05
• Automatic offers:
• shubham1206agra | Reviewer | 28150587
• Krishna2323 | Contributor | 28150588

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

[lanitochka17]

We think that this bug might be related to #wave
CC @greg-schroeder

[melvin-bot]

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

[Krishna2323]

Proposal

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

Workspace - Workspace highlighted member blinks when check/uncheck mark

What is the root cause of that problem?

This is caused because we update to focusedIndex to -1 whenever we select any member and then immediately set it to 0, which cause this flicker, the focus is removed for once and gets back immediately.

The focus is removed from here:

App/src/components/SelectionList/BaseSelectionList.tsx

Lines 202 to 204 in 3ab4e6e

	if (shouldUnfocusRow) {
	// Unfocus all rows when selecting row with click/press
	setFocusedIndex(-1);

And then immediately reapplied here:

App/src/components/SelectionList/BaseSelectionList.tsx

Lines 350 to 361 in 3ab4e6e

	useEffect(() => {
	// do not change focus on the first render, as it should focus on the selected item
	if (isInitialSectionListRender) {
	return;
	}
	// set the focus on the first item when the sections list is changed
	if (sections.length > 0) {
	updateAndScrollToFocusedIndex(0);
	}
	// eslint-disable-next-line react-hooks/exhaustive-deps
	}, [sections]);

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

Remove the condition below because it has no need now, the condition was added due to this issue #25884, but now we don't update the focus to next option, so it's redundant.

App/src/components/SelectionList/BaseSelectionList.tsx

Lines 202 to 204 in 3ab4e6e

	if (shouldUnfocusRow) {
	// Unfocus all rows when selecting row with click/press
	setFocusedIndex(-1);

Result

flickering_issue.mp4

[melvin-bot]

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