[Hold] on #29199 [$500] Chat - The composer isn't focused if you choose "Manage my team's expenses"

[izarutskaya]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Found when validating PR : #37652

Version Number: 1.4.48.0
Reproducible in staging?: Y
Reproducible in production?: Y
Logs: https://stackoverflow.com/c/expensify/questions/4856
Issue reported by: Applause-Internal team

Action Performed:

1. Log in with a new account
2. Tap on "Manage my team's expenses"
3. Tap on the "No" button

Expected Result:

It should be focused and the keyboard should be visible.

Actual Result:

The composer isn't focused if you choose "Manage my team's expenses"

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

Bug6405477_1709821119877.IQTX5174.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01406f3d8e31f8e03b
• Upwork Job ID: 1767135944339693568
• Last Price Increase: 2024-03-18

[melvin-bot]

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

[izarutskaya]

@laurenreidexpensify I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors.

[ShridharGoel]

Proposal

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

The composer isn't focused if "Manage my team's expenses" is selected.

What is the root cause of that problem?

Below is the auto-focus logic in ComposerWithSuggestions

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

Lines 270 to 271 in bf1ff4c

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

!modal?.isVisible doesn't make sense. We should check if the modal is visible, so the condition should be:
(!!modal?.isVisible || modal?.willAlertModalBecomeVisible) instead of !modal?.isVisible.

Also, since it is not an empty chat - isEmptyChat becomes false.

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

This should be the check:

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

We can auto-focus for concierge chats, since user will probably want to ask a question if concierge chat has been opened.

What alternative solutions did you explore?

Otherwise, we can add a check to see if the user has landed from "Manage my team's expenses" option - if true, then auto-focus.

[melvin-bot]

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

[melvin-bot]

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