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

[laurenreidexpensify]

This feels like a low priority bug - not sure if it fits under any roadmap project specifically tho

[FitseTLT]

Proposal

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

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

What is the root cause of that problem?

The auto-focus is disabled in natives intentionally for better UX experience unless we are opening an empty chat here

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

Lines 270 to 272 in 77375e8

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

Now the problem here is two

1. modal.isVisible is true as we didn't pass shouldDismissModal parameter as true when navigating to concierge chat here
   

   App/src/pages/OnboardEngagement/ManageTeamsExpensesPage.tsx

   Line 60 in 6e42e55

   Report.navigateToConciergeChat();

2. The way we calculate empty chat is by checking if report actions list is empty which is wrong and the concierge chat has multiple report actions already and for other chats too even empty chats have one CREATED type report action
   

   App/src/pages/home/ReportScreen.js

   Lines 265 to 266 in 77375e8

   	const isEmptyChat = useMemo(() => _.isEmpty(reportActions), [reportActions]);
   	// There are no reportActions at all to display and we are still in the process of loading the next set of actions.

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

1. Pass should dismiss modal as true

        Report.navigateToConciergeChat(true);

2. We should change the way isEmptyChat is calculated
   we can use the logic we are using here
   

   App/src/libs/ReportUtils.ts

   Lines 4130 to 4131 in 77375e8

   	const isEmptyChat = !report.lastMessageText && !report.lastMessageTranslationKey && !lastVisibleMessage.lastMessageText && !lastVisibleMessage.lastMessageTranslationKey;
   	const canHideReport = shouldHideReport(report, currentReportId);

   
   by checking lastMessageText is empty
   Or we can also check if there is only one reportAction

    const isEmptyChat = useMemo(() => _.size(reportActions) === 1, [reportActions]);

but this will only work for other chats as the concierge chat has multiple system message even if the chat is empty so we can use the above lastMessageText method for concierge chat or we can make the autofocus enabled for natives when isConciergeChatReport is true by updating the condition here

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

Lines 270 to 272 in 77375e8

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

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

What alternative solutions did you explore? (Optional)

[laurenreidexpensify]

@fedirjh bump for review

[fedirjh]

@laurenreidexpensify This should be handled with #29199. Let's put it on hold.

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

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

[laurenreidexpensify]

Still held on #29199

[laurenreidexpensify]

[Hold] on #29199

[laurenreidexpensify]

I"m going to close this one out as it will be covered in #29199