[HOLD for payment 2022-01-19] When you click into a given page in a Workspace and then click back out, the page is still highlighted

[mvtglobally]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Action Performed:

1. Open app
2. Navigate to workspace
3. Click any page and navigate back out

Expected Result:

Since user is back to the main page, selected page should not be highlighted

Actual Result:

when you click into a given page in a Workspace and then click back out, the page you clicked into is still highlighted. It remains highlighted even as you over over other pages.

Workaround:

unknown

Platform:

Where is this issue occurring?

• Web
• iOS
• Android
• Desktop App
• Mobile Web

Version Number: 1.1.25-0
Reproducible in staging?: Y
Reproducible in production?: Y
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation
Upwork URL: https://www.upwork.com/jobs/~0178e910d1a86795eb

Screen.Recording.2021-12-30.at.2.58.02.PM.mov

Expensify/Expensify Issue URL:
Issue reported by: @puneetlath
Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1640905133320000

View all open jobs on GitHub

[MelvinBot]

Triggered auto assignment to @Beamanator (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[Beamanator]

I can reproduce too 👍 This seems like a regression, I doubt it was always like this - I'll look around & ask around to see if I can figure out where it came from

[Beamanator]

Ok looks like this started way back here: #4382 - when the workspace pages were full screen. When we added lots more workspace pages & probably made the settings only partial-page here (#5642), we kept the active-page code. This can definitely be done externally, it would be nice if we could get a new contributor to work on this one since it looks easy

[MelvinBot]

Triggered auto assignment to @trjExpensify (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[thesahindia]

Proposal

removing the isActive property from menuItems will solve this issue.

App/src/pages/workspace/WorkspaceInitialPage.js

Lines 79 to 128 in 580c9db

	const menuItems = [
	{
	translationKey: 'workspace.common.settings',
	icon: Expensicons.Gear,
	action: () => Navigation.navigate(ROUTES.getWorkspaceSettingsRoute(policy.id)),
	isActive: Navigation.isActiveRoute(ROUTES.getWorkspaceSettingsRoute(policy.id)),
	},
	{
	translationKey: 'workspace.common.card',
	icon: Expensicons.ExpensifyCard,
	action: () => Navigation.navigate(ROUTES.getWorkspaceCardRoute(policy.id)),
	isActive: Navigation.isActiveRoute(ROUTES.getWorkspaceCardRoute(policy.id)),
	},
	{
	translationKey: 'workspace.common.reimburse',
	icon: Expensicons.Receipt,
	action: () => Navigation.navigate(ROUTES.getWorkspaceReimburseRoute(policy.id)),
	isActive: Navigation.isActiveRoute(ROUTES.getWorkspaceReimburseRoute(policy.id)),
	},
	{
	translationKey: 'workspace.common.bills',
	icon: Expensicons.Bill,
	action: () => Navigation.navigate(ROUTES.getWorkspaceBillsRoute(policy.id)),
	isActive: Navigation.isActiveRoute(ROUTES.getWorkspaceBillsRoute(policy.id)),
	},
	{
	translationKey: 'workspace.common.invoices',
	icon: Expensicons.Invoice,
	action: () => Navigation.navigate(ROUTES.getWorkspaceInvoicesRoute(policy.id)),
	isActive: Navigation.isActiveRoute(ROUTES.getWorkspaceInvoicesRoute(policy.id)),
	},
	{
	translationKey: 'workspace.common.travel',
	icon: Expensicons.Luggage,
	action: () => Navigation.navigate(ROUTES.getWorkspaceTravelRoute(policy.id)),
	isActive: Navigation.isActiveRoute(ROUTES.getWorkspaceTravelRoute(policy.id)),
	},
	{
	translationKey: 'workspace.common.members',
	icon: Expensicons.Users,
	action: () => Navigation.navigate(ROUTES.getWorkspaceMembersRoute(policy.id)),
	isActive: Navigation.isActiveRoute(ROUTES.getWorkspaceMembersRoute(policy.id)),
	},
	{
	translationKey: 'workspace.common.bankAccount',
	icon: Expensicons.Bank,
	action: () => Navigation.navigate(ROUTES.getWorkspaceBankAccountRoute(policy.id)),
	isActive: Navigation.isActiveRoute(ROUTES.getWorkspaceBankAccountRoute(policy.id)),
	},
	];

[sobitneupane]

Proposal
Making following change to WorkspaceInitialPage.js will solve the issue.

<MenuItem
                                    key={item.translationKey}
                                    title={this.props.translate(item.translationKey)}
                                    icon={item.icon}
                                    iconRight={item.iconRight}
                                    onPress={() => item.action()}
-                                   wrapperStyle={shouldFocus ? styles.activeComponentBG : undefined}
-                                   focused={shouldFocus}
                                    shouldShowRightIcon
                                />

[MelvinBot]

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

[MelvinBot]

Current assignee @Beamanator is eligible for the Exported assigner, not assigning anyone new.

[trjExpensify]

Exported the job to Upwork here: https://www.upwork.com/jobs/~0178e910d1a86795eb

[Beamanator]

@rushatgabhane would you mind commenting in this issue so I can assign you to help review proposals as a Contributor-plus?

[rushatgabhane]

@Beamanator Here, thanks

[Beamanator]

Great! Assigned you to help review, @rushatgabhane - hopefully this will be automated starting tomorrow :D

[rushatgabhane]

@thesahindia What do you plan to do with isFocused which is a required prop?

[thesahindia]

@rushatgabhane,
I think we can remove both withNavigationFocus and isFocused from that file and do the clean-up since now the focused logic is not needed

[rushatgabhane]

🎀👀🎀 C+ reviewed
@Beamanator I like @thesahindia's proposal.

Because there is no double side nav drawer for this view, we can't see the focused menu item anyway.
We can remove the focus entirely.

[Beamanator]

I agree! Let's go with @thesahindia 👍

[MelvinBot]

📣 @thesahindia You have been assigned to this job by @Beamanator!
Please apply to this job in Upwork 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 📖

[trjExpensify]

Hired on Upwork 👍

[botify]

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

• workspace focus fix #7040

If no regressions arise, payment will be issued on 2022-01-19. 🎊

[trjExpensify]

Settled up on Upwork, @thesahindia. Thank you!