[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 [email protected] 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.

[michaelhaxhiu]

This is affecting Desktop equally, so checking that box in affected platform list.

[melvin-bot]

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

[legendsoftdev]

Hi, thank you for your post.
I have worked on your problem and I hope I understood it correctly.
Please take a look at the attached file and let me know if you have any questions or feedback.

Screen_Recording_20230630_033706_New.Expensify.mp4

Best regards.

[melvin-bot]

📣 @legendsoftdev! 📣
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. 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.
2. 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.
3. 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>

[legendsoftdev]

Contributor details
Your Expensify account email: [email protected]
Upwork Profile Link: https://www.upwork.com/freelancers/~01d5e86a0f892dfc8f

[melvin-bot]

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

[fedirjh]

cc @michaelhaxhiu Let's add it to the tracking issue [Tracking] Fix Composer Component Focus Issues

[melvin-bot]

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

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[melvin-bot]

@michaelhaxhiu @fedirjh this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[melvin-bot]

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

[melvin-bot]

@michaelhaxhiu, @fedirjh Now this issue is 8 days overdue. Are you sure this should be a Daily? Feel free to change it!

[fedirjh]

@bernhardoj's proposal looks good to me.

🎀 👀 🎀 C+ reviewed

[melvin-bot]

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

[melvin-bot]

📣 @fedirjh 🎉 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: @fedirjh

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.4.67-7 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• Fix composer won't focus after visiting concierge from get assistance page #40708

If no regressions arise, payment will be issued on 2024-05-06. 🎊

For reference, here are some details about the assignees on this issue:

• @fedirjh requires payment automatic offer (Reviewer)
• @bernhardoj requires payment automatic offer (Contributor)
• @Habtamu-Asefa requires payment (Needs manual offer from BZ)

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@fedirjh] The PR that introduced the bug has been identified. Link to the PR:
• [@fedirjh] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
• [@fedirjh] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
• [@fedirjh] Determine if we should create a regression test for this bug.
• [@fedirjh] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@bfitzexpensify] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[habasefa]

Reporting bonus payment is pending. @bfitzexpensify the issue was created while bug reporting was being compensated $250

[bfitzexpensify]

Payment complete to @bernhardoj

Offer sent @Habtamu-Asefa

Please complete the BZ checklist @fedirjh and I'll finalise your payment.

[habasefa]

@bfitzexpensify Thank you, I just accepted the offer.

[fedirjh]

BugZero Checklist:

• Link to the PR: It doesn't appear that this bug was being a regression.
• Link to comment: N/A
• Link to discussion: N/A Nothing to add to the checklist
• Determine if we should create a regression test for this bug: N/A There is no need for a regression test in this case because it is an edge case bug.

[bfitzexpensify]

Thanks @fedirjh. All payments complete, closing this out.