[PAYMENT DUE 2024-03-06] [$500] RHP - User redirected from "Room" tab to "Chat" tab when tapped on the back button

[kavimuru]

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

Action Performed:

1. Open app
2. Tap on FAB
3. Select "Start Chat"
4. Select "Room" tab
5. Tap on back button

Expected Result:

RHP should be closed and user should be navigated to LHN when user tapped on back button

Actual Result:

User redirected from "Room" tab to "Chat" tab when tapped on the back button

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

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

Bug6354481_1706178877493.screen-20240125-020533.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01a7c80f42a2fdfb07
• Upwork Job ID: 1750499615463923712
• Last Price Increase: 2024-01-25
• Automatic offers:
• situchan | Reviewer | 28134705
• bernhardoj | Contributor | 28134706

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[abzokhattab]

Proposal

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

User redirected from "Room" tab to "Chat" tab when tapped on the back button

What is the root cause of that problem?

there is no on onBackButtonPress prop bassed to the header which causes it to use the default behaviour which is goBack() so the navigator goes back to the prev page

App/src/pages/NewChatSelectorPage.js

Line 37 in b3ada0d

<HeaderWithBackButton title={props.translate('sidebarScreen.fabNewChat')} />

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

need to add modal dismiss as the action of the onBackButtonPress prop

    <HeaderWithBackButton
                onBackButtonPress={Navigation.dismissModal}
                title={props.translate('sidebarScreen.fabNewChat')}
            />

alternatively

we can use navigation replace instead of the navigate when clicking on a tab so that it replaces the current navigation state with the target tab route

App/src/components/TabSelector/TabSelector.tsx

Line 120 in 82b76c1

navigation.navigate({key: route.key, merge: true});

[Pujan92]

Proposal

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

On back for new chat selector the modal is not dismissed

What is the root cause of that problem?

It seems to be intentional from this PR where we have removed dismissing the modal for issue #27669. Issue was - when the modal is opened for settings and if we use keyboard shortcut CTRL+SHIFT+K to open start chat and click back then it is not going back to the settings modal.

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

If the requirement is to dismiss the modal then we can re-add the onBackButtonPress which will dismiss the modal.

[JordanLevy19]

Proposal

Please re-state the problem that we are trying to solve in this issue.
When a user selects the 'Room' tab within the 'New Chat' page and then taps the back button, the app redirects them to the 'Chat' tab instead of closing the Right Hand Panel (RHP) and returning them to the Left Hand Navigation (LHN)

What is the root cause of that problem?
The root of the issue may be found within the following parts of the code:

HeaderWithBackButton: The HeaderWithBackButton is responsible for rendering the back button on the header. The specific behavior when the back button is pressed (such as closing the panel or switching tabs) is not detailed here, which suggests that the logic is defined elsewhere, possibly in a parent component or within the HeaderWithBackButton's implementation itself.

<HeaderWithBackButton title={props.translate('sidebarScreen.fabNewChat')} />

OnyxTabNavigator: The OnyxTabNavigator manages the tab navigation. It includes a custom tabBar prop that uses TabSelector. If the logic associated with the back button is tied into the tab navigator’s state, it might be causing the incorrect navigation.

<OnyxTabNavigator
id={CONST.TAB.NEW_CHAT_TAB_ID}
tabBar={({state, navigation, position}) => (
    <TabSelector
        state={state}
        navigation={navigation}
        position={position}
    />
)}

<TopTab.Screen
    name={CONST.TAB.NEW_CHAT}
    component={NewChatPage}
/>
<TopTab.Screen
    name={CONST.TAB.NEW_ROOM}
    component={WorkspaceNewRoomPage}
/>

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

Review and Update HeaderWithBackButton Logic:
Investigate the implementation of the HeaderWithBackButton. Ensure that the back button is configured to close the Right Hand Panel (RHP) and return to the Left Hand Navigation (LHN) instead of switching tabs.
If necessary, update the onPress handler to explicitly define the desired navigation action.

Adjust Navigation State Management in OnyxTabNavigator:
Review how OnyxTabNavigator manages the navigation state, especially in relation to the back button actions. Ensure that the tab navigator's state management doesn't override or conflict with the back button's intended functionality.

[bernhardoj]

Proposal

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

Pressing back in start chat page goes to the previous tab.

What is the root cause of that problem?

The back button will call Navigation.goBack() which will call navigationRef.current.goBack().

App/src/components/HeaderWithBackButton/index.tsx

Line 27 in 83a7535

onBackButtonPress = () => Navigation.goBack(ROUTES.HOME),

navigationRef is the ref of the root NavigationContainer

App/src/libs/Navigation/NavigationRoot.tsx

Lines 96 to 100 in 83a7535

	<NavigationContainer
	onStateChange={handleStateChange}
	onReady={onReady}
	theme={navigationTheme}
	ref={navigationRef}

and when we call goBack on it, it will pop the navigation history one by one including the tab history.

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

Use useNavigation hook to get the navigation object that "belongs" to the Start Chat stack and call goBack using the navigation object. This way, it will pop the Start Chat from the stack.

NewChatSelectorPage.js

const navigation = useNavigation();

<HeaderWithBackButton title={props.translate('sidebarScreen.fabNewChat')} onBackButtonPress={() => navigation.goBack()} />

[adarsh0raj]

Proposal

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

After selecting 'Room' Tab in Right Hand Panel, and then clicking on Back Button, the user is redirected to 'Chat' Tab. The ideal behaviour should be closing the Right Hand Panel and going back to LHN.

What is the root cause of that problem?

The root cause is not passing an updated prop value for the function 'onBackButtonPress()', in the component HeaderWithBackButton. This leads to its default behaviour.

Integration of Component:

App/src/pages/NewChatSelectorPage.js

Line 36 in 83a7535

<HeaderWithBackButton title={props.translate('sidebarScreen.fabNewChat')} />

The default behaviour of 'onBackButtonPress()' function defined in the component is to call 'Navigation.goBack(ROUTES.Home)', as can be seen in the following line. The goBack() function is implemented in 'libs/Navigation' in such a way that it takes multiple arguments, in which one argument is "shouldPopToTop" which is "false" by default. Hence, when we are calling the goBack function it is not going to LHN, as we are not passing the "shouldPopToTop" param as true in the default function above.

App/src/components/HeaderWithBackButton/index.tsx

Line 27 in 83a7535

onBackButtonPress = () => Navigation.goBack(ROUTES.HOME),

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

We can update the 'onBackButtonPress()' in the call as below, after importing Navigation from libs in 'NewChatSelectorPage'. Or passing True for 'shouldPopToTop' which will take the user directly to LHN.

<HeaderWithBackButton 
      title={props.translate('sidebarScreen.fabNewChat')} 
      // First Option:    onBackButtonPress={Navigation.dismissModal} 
      // Second Option:    onBackButtonPress={Navigation.goBack(ROUTES.HOME, false, true)}
/>

---

[melvin-bot]

📣 @adarsh0raj! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[adarsh0raj]

Contributor details
Your Expensify account email: testadarsh72@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/~01e6080583f375d0d1

[melvin-bot]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[situchan]

Search page is moved to LHP so New chat page can no longer be compared to Search page for consistency check.

[situchan]

Personally I am looking for solution to skip tab navigation default behavior on navigation back. So as if there were not tab navigator.

[bernhardoj]

Personally I am looking for solution to skip tab navigation default behavior on navigation back

My proposal did this.

[situchan]

@bernhardoj's proposal looks good to me.
Other proposals cause regression of closing all RHP modals (i.e. Cmd+Shift+K on Settings page)

🎀 👀 🎀 C+ reviewed

[melvin-bot]

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

[melvin-bot]

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

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

[bernhardoj]

PR is ready

cc: @situchan

[melvin-bot]

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

[melvin-bot]

@Beamanator, @bernhardoj, @zanyrenney, @situchan Whoops! This issue is 2 days overdue. Let's get this updated quick!

[Beamanator]

PR still in progress

[zanyrenney]

what's the ETA on the PR @Beamanator ?

[Beamanator]

As you can see in the PR linked a bit above, I just bumped @situchan for another review

[melvin-bot]

@Beamanator, @bernhardoj, @zanyrenney, @situchan Eep! 4 days overdue now. Issues have feelings too...

[situchan]

PR was merged

[zanyrenney]

nice stuff re the merge. thanks!

[zanyrenney]

PR was merged and deployed to prod5 days ago, waiting the 7 day period and then will do payments.

[zanyrenney]

Payment summary
@bernhardoj $500 PAID on upwork
@situchan $500 PAID on upwork