[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

[melvin-bot]

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

[mountiny]

@Krishna2323 can you please link offending PR

[melvin-bot]

Upwork job price has been updated to $250

[mountiny]

Moving the price down since this seems like easy bug to solve

[Krishna2323]

@mountiny, I'm don't think it is caused by a recent PR. This is the PR which added code to remove focus after an option is selected and this PR later added code to focus on first option whenever an option is selected. And due to the immediate change of removing focus & adding back we get the flickering.

[luacmartins]

Still looking for proposals

[Krishna2323]

I have a proposal here 😅, @shubham1206agra can you pls review 🙏🏻

[shubham1206agra]

@Krishna2323's proposal looks good to me.
🎀 👀 🎀 C+ reviewed

[melvin-bot]

Current assignee @luacmartins is eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.

[melvin-bot]

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

Offer link
Upwork job

[melvin-bot]

📣 @Krishna2323 🎉 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 📖

[melvin-bot]

Triggered auto assignment to @miljakljajic (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[Krishna2323]

@shubham1206agra, PR ready for review.

[Krishna2323]

Melv failed here, PR was deployed to production on 15th Feb, I think this is ready for payments process :)

[shubham1206agra]

@luacmartins Can you start payment process here?

[luacmartins]

Added to the title. @miljakljajic could you please assist with payment? Thank you!

[miljakljajic]

@shubham1206agra I can't pay you until you accept the offer in upwork

[miljakljajic]

@Krishna2323 paid, thank you!

[shubham1206agra]

@miljakljajic Accepted

[miljakljajic]

Paid!