[HOLD for Payment 2024-09-25] [Search v2.1][$250] The “Enter” key on the search page randomly opens the workspace switcher or the RHP

[m-natarajan]

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: 9.0.33-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: @suneox
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1726117464938269

Action Performed:

1. Go to the search page
2. Click Enter
3. Observe the workspace switcher opens
4. Click out of the workspace switcher
5. Click Chats
6. Click Expenses
7. Click Outstanding
8. Click Enter
9. Observe the RHP opens.

Expected Result:

The workspace switcher or the RHP does not open when clicking Enter on the search page.

Actual Result:

The workspace switcher and RHP open when clicking Enter

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

Screen.Recording.2024-09-12.at.02.49.56.mp4

View all open jobs on GitHub

Recording.539.mp4

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021834395341977846523
• Upwork Job ID: 1834395341977846523
• Last Price Increase: 2024-09-13
• Automatic offers:
• ikevin127 | Reviewer | 103975534

Issue Owner

Current Issue Owner: @ikevin127

[melvin-bot]

Triggered auto assignment to @trjExpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[suneox]

I think the expected behavior at step 6 is that the report detail page should not be shown, due to the lack of context to select which expense from the list.

[trjExpensify]

Hm, I'm not sure about this actually. Why would we open anything at all when Enter is clicked? We don't do that on other pages. @luacmartins am I missing something on why the Enter key is opening the workspace switcher here?

[luacmartins]

My best guess is that we have focus trap on some button and we're triggering that onPress behavior when pressing enter

[trjExpensify]

Yeah, so I think the expected behaviour here is that the workspace switcher nor the expense RHP opens when you randomly click Enter on the search page.

[melvin-bot]

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

[melvin-bot]

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

[bernhardoj]

Edited by proposal-police: This proposal was edited at 2024-09-14 16:33:40 UTC.

Proposal

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

Pressing enter while on the search page opens the workspace switcher page.

What is the root cause of that problem?

When we open the search page, the focus trap for the search bottom tab screen is activated which will focus on the workspace switcher page. So, pressing enter will open the ws switcher page. But actually, we have a code to disable the focus trap for bottom tab screens.

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

Lines 18 to 25 in 50cc548

	const isActive = useMemo(() => {
	if (typeof focusTrapSettings?.active !== 'undefined') {
	return focusTrapSettings.active;
	}
	// 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 bottom tab screens don't include the search bottom tab screen yet.

App/src/components/FocusTrap/BOTTOM_TAB_SCREENS.ts

Line 4 in 4039a12

const BOTTOM_TAB_SCREENS = [SCREENS.HOME, SCREENS.SETTINGS.ROOT, NAVIGATORS.BOTTOM_TAB_NAVIGATOR];

After fixing the above issue, we still have another issue where pressing Enter will open the report RHP in Expenses and Invoices tab. That's because the "View" action button has a ppressOnEnter enabled which enabled the enter shortcut for the button.

App/src/components/SelectionList/Search/ActionCell.tsx

Lines 66 to 72 in 0c618ac

	if (action === CONST.SEARCH.ACTION_TYPES.VIEW || shouldUseViewAction) {
	return isLargeScreenWidth ? (
	<Button
	text={translate(actionTranslationsMap[CONST.SEARCH.ACTION_TYPES.VIEW])}
	onPress={goToItem}
	small
	pressOnEnter

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

Add the search bottom tab screen to the list.

const BOTTOM_TAB_SCREENS = [SCREENS.HOME, SCREENS.SETTINGS.ROOT, NAVIGATORS.BOTTOM_TAB_NAVIGATOR, SCREENS.SEARCH.BOTTOM_TAB];

Remove pressOnEnter from the action button.

App/src/components/SelectionList/Search/ActionCell.tsx

Lines 66 to 91 in 0c618ac

	if (action === CONST.SEARCH.ACTION_TYPES.VIEW || shouldUseViewAction) {
	return isLargeScreenWidth ? (
	<Button
	text={translate(actionTranslationsMap[CONST.SEARCH.ACTION_TYPES.VIEW])}
	onPress={goToItem}
	small
	pressOnEnter
	style={[styles.w100]}
	innerStyles={buttonInnerStyles}
	link={isChildListItem}
	shouldUseDefaultHover={!isChildListItem}
	/>
	) : null;
	}
	if (action === CONST.SEARCH.ACTION_TYPES.REVIEW) {
	return (
	<Button
	text={text}
	onPress={goToItem}
	small
	pressOnEnter
	style={[styles.w100]}
	innerStyles={buttonInnerStyles}
	/>
	);

[ikevin127]

@bernhardoj Thanks for your proposal. While your solution does seem to fix the fact that Enter opens the workspace switcher, we're still left with the issue of the RHP opening (see video below).

Screen.Recording.2024-09-13.at.20.02.51.mov

[bernhardoj]

Oh, I was trying to repro it on the Chats type but no success. Turns out it's reproducible on the Expenses and Invoices tab. Updated my proposal!

[ikevin127]

🎉 Thanks for the update! @bernhardoj's updated proposal looks good to me - the RCA is correct and the updated solution fixes the issue according to the Expected result 👍

🎀👀🎀 C+ reviewed

[melvin-bot]

Current assignee @luacmartins is eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.

[melvin-bot]

📣 @ikevin127 🎉 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

[bernhardoj]

PR is ready

cc: @ikevin127

[ikevin127]

⚠️ Automation failed here -> this should be on [HOLD for Payment 2024-09-25] according to today's production deploy from Deploy Checklist: New Expensify 2024-09-17 which was shipped to production today.

cc @trjExpensify

[trjExpensify]

Thanks!

[trjExpensify]

Payment summary as follows:

• $250 to @ikevin127 for the C+ review (paid!)
• $250 to @bernhardoj for the fix (go ahead and request)

Closing!

[bernhardoj]

Requested in ND.

[JmillsExpensify]

$250 approved for @bernhardoj