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