[HOLD for payment 2024-08-01] [$250] mWeb – Chat – Workspace switcher is with blue border after login

[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.83-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: N/A
Email or phone of affected tester (no customers): applausetester+jp_e_category_1@applause.expensifail.com
Issue reported by: Applause - Internal Team

Action Performed:

1. Go to https://staging.new.expensify.com/
2. Log out
3. Log in
4. Observe Workspace switcher in the left top part

Expected Result:

Workspace switcher is without blue border after login

Actual Result:

Workspace switcher is with blue border after login

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

Bug6512187_1718296681964.Blue_b.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0140196526c3a485da
• Upwork Job ID: 1803111339129290564
• Last Price Increase: 2024-07-16
• Automatic offers:
• hoangzinh | Reviewer | 103161579
• tsa321 | Contributor | 103161581

Issue Owner

Current Issue Owner: @hoangzinh

[melvin-bot]

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

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

@tylerkaraszewski FYI 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

[lanitochka17]

We think that this bug might be related to #vip-vsp

[tylerkaraszewski]

I can't reproduce this.

RPReplay_Final1718305035.mp4

[luacmartins]

This is likely coming from #39520. It's really minor though

[luacmartins]

@lanitochka17 can you ask for a re-test? In the meantime, I'll demote this to NAB since it doesn't break any features.

[tsa321]

Proposal

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

Workspace switcher is with blue border after login

What is the root cause of that problem?

When the route is Home:

App/src/libs/Navigation/AppNavigator/Navigators/BottomTabNavigator.tsx

Lines 41 to 43 in 4ae133d

	<Tab.Screen
	name={SCREENS.HOME}
	component={SidebarScreen}

the SidebarScreen is displayed. The SidebarScreen is a component of Tab.Screen with the name SCREENS.HOME in bottomTabNavigator. The Tab is inside the createCustomBottomTabNavigator function:

App/src/libs/Navigation/AppNavigator/createCustomBottomTabNavigator/index.tsx

Lines 49 to 54 in 4ae133d

	<ScreenWrapper
	testID={CustomBottomTabNavigator.displayName}
	shouldShowOfflineIndicator={false}
	shouldEnableKeyboardAvoidingView={false}
	shouldEnablePickerAvoiding={false}
	>

which includes ScreenWrapper.

So, when the route is Home, there are two screens: one from createCustomBottomTabNavigator and one from SidebarScreen, which is the component of the Tab.Screen for Home.

The focus trap is attached to ScreenWrapper, resulting in two focus traps. To disable the initial focus on the Workspace switcher, we must disable the initial focus for both of these screens.

The focus trap for Home is already disabled here:

App/src/components/FocusTrap/FocusTrapForScreen/index.web.tsx

Lines 22 to 25 in 4ae133d

	const isActive = useMemo(() => {
	// Focus trap can't be active on bottom tab screens because it would block access to the tab bar.
	if (BOTTOM_TAB_SCREENS.find((screen) => screen === route.name)) {
	return false;

However, the trapFocus for BottomTabNavigator is not yet disabled.

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

We can include NAVIGATORS.BOTTOM_TAB_NAVIGATOR in BOTTOM_TAB_SCREENS

Alternative solution (1):

We can add NAVIGATORS.BOTTOM_TAB_NAVIGATOR in SCREENS_WITH_AUTOFOCUS:

App/src/components/FocusTrap/SCREENS_WITH_AUTOFOCUS.ts

Line 4 in 633e708

const SCREENS_WITH_AUTOFOCUS: string[] = [

So it won't autofocus on Workspace switcher after login

Alternative solution (2):

alternatively we can disable focusTrap on small screen:

App/src/components/FocusTrap/FocusTrapForScreen/index.web.tsx

Lines 42 to 44 in 2a641d9

	return (
	<FocusTrap
	active={isActive}

Above that line, add this code to return children, the code could be:

if (isSmallScreenWidth) {return children;} Or similar cleaner and more efficient code.

[lanitochka17]

Issue is still reproducible on the mWeb/Chrome

Screenrecorder-2024-06-14-17-16-41-363.mp4

[melvin-bot]

@tylerkaraszewski Whoops! This issue is 2 days overdue. Let's get this updated quick!

[tylerkaraszewski]

I am going to mark this external and get a C+ for it.

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~0140196526c3a485da

[hoangzinh]

Thanks @tsa321. I think we can go with @tsa321's proposal #43713 (comment), with the main solution

🎀👀🎀 C+ reviewed

[melvin-bot]

Triggered auto assignment to @srikarparsi, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[hoangzinh]

Awaiting for @srikarparsi for 2nd review round

[srikarparsi]

Assigning @tsa321

[melvin-bot]

📣 @hoangzinh 🎉 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]

📣 @tsa321 🎉 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]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.11-5 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Fix blue border appears on workspace switcher button after login #45743

If no regressions arise, payment will be issued on 2024-08-01. 🎊

For reference, here are some details about the assignees on this issue:

• @hoangzinh requires payment automatic offer (Reviewer)
• @tsa321 requires payment automatic offer (Contributor)

[melvin-bot]

Issue is ready for payment but no BZ is assigned. @twisterdotcom you are the lucky winner! Please verify the payment summary looks correct and complete the checklist. Thanks!

[hoangzinh]

BugZero Checklist:

• The PR that introduced the bug has been identified. Link to the PR: Add focus trap #39520
• The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment: Add focus trap #39520 (comment)
• A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion: N/A
• Determine if we should create a regression test for this bug: ⛔ No it's a minor UI issue. User can still use app normally.

[twisterdotcom]

Payment Summary:

• @hoangzinh paid $250 here (Reviewer)
• @tsa321 paid $250 here (Contributor)