[HOLD for payment 2024-05-06] [HOLD #36071] [$1000] Textinput is not focused in chat after visiting conceirge help

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

---

Action Performed:

1. Create a new workspace
2. Go to the workspace invite page
3. Click ? and then Get Assistance
4. Click chat with concierge
5. See that the textinput isn't focused (you have to manually click into it to begin typing)

Expected Result:

Text input should be focused

Actual Result:

Text input is not focused
(Also navigate other chats and their text input is not focused)

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 / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: 1.3.31-2
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
Notes/Photos/Videos: Any additional supporting documentation
Text input is not focused after visiting coneirge help.webm

Recording.1077.mp4

Expensify/Expensify Issue URL:
Issue reported by: @Habtamu-Asefa
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1686984617296819

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01f42405b3f19296c4
• Upwork Job ID: 1674465220531503104
• Last Price Increase: 2023-07-06
• Automatic offers:
• fedirjh | Reviewer | 0
• bernhardoj | Contributor | 0

Issue Owner

Current Issue Owner: @bfitzexpensify

[melvin-bot]

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

[melvin-bot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[melvin-bot]

Looks like something related to react-navigation may have been mentioned in this issue discussion.

As a reminder, please make sure that all proposals are not workarounds and that any and all attempt to fix the issue holistically have been made before proceeding with a solution. Proposals to change our DeprecatedCustomActions.js files should not be accepted.

Feel free to drop a note in #expensify-open-source with any questions.

[bernhardoj]

Proposal

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

Chat doesn't get autofocus after visiting the concierge chat from the Get assistance page.

What is the root cause of that problem?

Chat will get autofocus if satisfies the below condition. shouldFocusInputOnScreenFocus is true for web/desktop platforms. The problematic condition is modal.isVisible. That condition tells us that it won't autofocus if a modal (including RHP) is visible.

App/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.tsx

Lines 270 to 271 in 51ef6c1

	const shouldAutoFocus =
	!modal?.isVisible && isFocused && (shouldFocusInputOnScreenFocus || (isEmptyChat && !ReportActionsUtils.isTransactionThread(parentReportAction))) && shouldShowComposeInput;

When we open the Get Assistance page (or any RHP page), it will set the modal visibility to true and false if we close the page, but from this issue, when we visit the Concierge page by pressing the Chat with concierge button, modal visibility stays true.

App/src/libs/Navigation/AppNavigator/AuthScreens.tsx

Lines 141 to 150 in 51ef6c1

	const modalScreenListeners = {
	focus: () => {
	Modal.setModalVisibility(true);
	},
	beforeRemove: () => {
	// Clear search input (WorkspaceInvitePage) when modal is closed
	SearchInputManager.searchInput = '';
	Modal.setModalVisibility(false);
	},
	};

It's because beforeRemove listener is never called, thus modal visibility stays true. Why? That's because we are doing a NAVIGATE action to the concierge chat.

App/src/pages/GetAssistancePage.tsx

Lines 37 to 40 in 51ef6c1

	const menuItems: MenuItemWithLink[] = [
	{
	title: translate('getAssistancePage.chatWithConcierge'),
	onPress: () => Report.navigateToConciergeChat(),

App/src/libs/actions/Report.ts

Lines 1744 to 1746 in 51ef6c1

	} else {
	Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(conciergeChatReportID));
	}

On the web/desktop, it looks like the RHP is closed, but we can easily tell on a small screen that RHP is still open by pressing back.

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

We should pass true as the first param of navigateToConciergeChat to dismiss the RHP modal and navigate to the concierge chat.

We need to fix this on some pages too (ManageTeamsExpensesModal, FinishChatCard, TroubleshootPage, and potentially in WalletStatementModal too but I don't how to access it).

[melvin-bot]

@michaelhaxhiu Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[melvin-bot]

@michaelhaxhiu Huh... This is 4 days overdue. Who can take care of this?

[melvin-bot]

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

[melvin-bot]

Current assignee @michaelhaxhiu is eligible for the External assigner, not assigning anyone new.