[$250] Web - Chats - When clicking on a searched user in LHN the page closes

[kbecciv]

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:

You need to be logged in before starting the steps below

1. Open the website https://staging.new.expensify.com in a new tab, you should land in a chat
2. Click the search on the top of the LHN, the search panel will open
3. Click any user in the search panel that is not the one with whom you have the chat open, the search panel will close
4. Click the same user (selected in the search) in the LHN

Expected Result:

After clicking on the user - page should open chat conversation

Actual Result:

When clicking on a searched user in LHN the page closes

Workaround:

Unknown

Platform:

Where is this issue occurring?

• Web

Version Number: 1.1.54.0

Reproducible in staging?: Yes

Reproducible in production?: Yes

Email or phone of affected tester (no customers): n/a

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation

Bug5531648_New_Expensify_-_Trabalho___Microsoft__Edge_2022-04-13_11-37-16.mp4

Expensify/Expensify Issue URL:

Issue reported by: Applause (Exploratory)

Slack conversation:

View all open jobs on GitHub

job post

[melvin-bot]

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

[iwiznia]

I can't reproduce this, are the steps complete? Or is this fixed already? @kbecciv can you check please?

[kbecciv]

@iwiznia Steps are completed, issue is reproduced in my end.

Recording.237.mp4

[iwiznia]

I am doing the same thing with no luck 😞
Going to assume someone else will be able to reproduce.

[melvin-bot]

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

[jboniface]

job post

[melvin-bot]

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

[melvin-bot]

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

[frenkield]

The browser is actually navigating back - it's not closing the tab. It appears to be the DrawerActions.closeDrawer() action in CustomActions.js that's sending the browser all the way back to the previous page. There's some manipulation of the route and history in CustomActions.js. So maybe the problem is related to that.

Is there maybe a straightforward way to determine when it's appropriate to do DrawerActions.closeDrawer()? It seems to get called any time the currently selected item in the LHN is clicked, regardless of the drawer state.

[flodnv]

Thanks for the insight @frenkield. Are you referring to this code?

App/src/libs/Navigation/CustomActions.js

Lines 82 to 89 in cc38098

	// If we're trying to navigate to the same screen that is already active there's nothing more to do except close the drawer.
	// This prevents unnecessary re-rendering the screen and adding duplicate items to the browser history.
	const activeState = getActiveState();
	const activeScreenName = getScreenNameFromState(activeState);
	const activeScreenParams = getParamsFromState(activeState);
	if (newScreenName === activeScreenName && _.isEqual(activeScreenParams, newScreenParams)) {
	return DrawerActions.closeDrawer();
	}

Any thoughts @rushatgabhane ?

[frenkield]

Yeah exactly, @flodnv. That's the code.

[aldo-expensify]

so.. after looking into this issue and this other GH issue #8723, I'm pretty sure that this happens when we call navigateBackToRootDrawer:

App/src/libs/Navigation/CustomActions.js

Lines 21 to 31 in 02af111

	function navigateBackToRootDrawer() {
	const activeState = getActiveState();
	// To navigate to the main drawer Route, pop to the first route on the Root Stack Navigator as the main drawer is always the first route that is activated.
	// It will pop all fullscreen and RHN modals that are over the main drawer.
	// It won't work when the main drawer is not the first route of the Root Stack Navigator which is not the case ATM.
	navigationRef.current.dispatch({
	...StackActions.popToTop(),
	target: activeState.key,
	});
	}

This function also gets called when we close the RHN, and it takes us out of NewDot if we entered directly to NewDot using a URL that opens the RHN navigation (i.e. new.expensify.com/search)

This function is called from here in the case of this GH issue:

App/src/libs/Navigation/CustomActions.js

Lines 78 to 80 in cc38098

	if (currentState.type !== 'drawer') {
	navigateBackToRootDrawer();
	}

and the function is called from here in the case of the GH issue #8723:

App/src/libs/Navigation/Navigation.js

Lines 152 to 165 in 02af111

	function dismissModal(shouldOpenDrawer = false) {
	if (!canNavigate('dismissModal')) {
	return;
	}
	const normalizedShouldOpenDrawer = _.isBoolean(shouldOpenDrawer)
	? shouldOpenDrawer
	: false;
	CustomActions.navigateBackToRootDrawer();
	if (normalizedShouldOpenDrawer) {
	openDrawer();
	}
	}

After some time spent debugging our code and library code, I haven't been able find a reason why it navigates outside of the app :(

[flodnv]

Let's see if @aneequeahmad can fix it: #7618 (comment), and take it from there.

Rest assured @frenkield , I do believe you should be entitled to at least $250 compensation.

[frenkield]

Ok super. Thanks, @flodnv!

[flodnv]

Switching to monthly whilst we wait for the above.

[flodnv]

We will probably have an update in the next few weeks.

[melvin-bot]

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

[kevinksullivan]

Looks like I should be removed here, but let me know if I'm misunderstanding.

[kbecciv]

One tester was able to reproduce this issue during QA Regression when executing PR: #9385
Credentials: andreylazutkinutest+123@gmail.com/w323052760We

Bug5641119_Recording__804.mp4