[HOLD #41128] [$500] mWeb - Chat - The keyboard appears for a moment when leaving the thread

[kbecciv]

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: v1.4.34-0
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: Applause - Internal Team
Slack conversation:

Issue found when executing PR #35202

Action Performed:

1. Go to URL https://staging.new.expensify.com/ on Android
2. Login with any account
3. Navigate to any conversation
4. Start a thread and send some messages
5. Tap and hold on a message and choose Reply in Thread
6. Click on the three-dot menu and hit "Leave thread"

Expected Result:

The keyboard doesn't appear for a moment when leaving the thread

Actual Result:

The keyboard appears for a moment when leaving the thread

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

Bug6362602_1706721121608.video_2024-01-31_17-29-22.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01278478c2e7ed2136
• Upwork Job ID: 1752743923246346240
• Last Price Increase: 2024-03-15

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[kbecciv]

We think that this bug might be related to #vip-vsb
CC @quinthar

[Christinadobrzyn]

I can reproduce this based on the steps in the OP. I think this can be External so waiting for proposals.

[samilabud]

Proposal

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

The keyboard appears for a moment when leaving the thread

What is the root cause of that problem?

When we are in a thread and the composer is focused the keyboard going to be displayed, but when we click on the three dots the keyboard get hide (as part of the behavior of this component), here no matter what option we select the keyboard going to be displayed again after three dots menu get hide, because of this when we leave the thread the keyboard seems to appear (expected behavior) and then disappears when the leave action makes we navigates back to main thread because the composer loose the focus.

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

We can keep the focus on the composer when navigating backwards and the keyboard is displayed.

To do this we should modify the ReportScreen Component to add a variable that determine if the user got to the screen using the navigation component with path (this let us know if the user is not getting to the Report from LHN), like:

const isReportOpenedFromNavigationPath = Boolean(lodashGet(route, 'path') || false);

And pass this to ReportFooter as a prop:

<ReportFooter
                                       report={report}
                                       pendingAction={addWorkspaceRoomOrChatPendingAction}
                                       isComposerFullSize={isComposerFullSize}
                                       listHeight={listHeight}
                                       isEmptyChat={isEmptyChat}
                                       lastReportAction={lastReportAction}
                                       isReportOpenedFromNavigationPath={isReportOpenedFromNavigationPath}
                                   />

With the prop isReportOpenedFromNavigationPath we can now determinate when to force the input focus, to do this we can pass as a prop the result of this variable on ReportActionCompose, like:

 const forceFocusComposer = props.isReportOpenedFromNavigationPath;
.
.
.
<ReportActionCompose
                            onSubmit={onSubmitComment}
                            reportID={props.report.reportID}
                            report={props.report}
                            isEmptyChat={props.isEmptyChat}
                            lastReportAction={props.lastReportAction}
                            pendingAction={props.pendingAction}
                            isComposerFullSize={props.isComposerFullSize}
                            listHeight={props.listHeight}
                            isReportReadyForDisplay={props.isReportReadyForDisplay}
                            shouldForceComposerFocus={forceFocusComposer}
                        />

Finally we should receive the new prop and use it to focus the composer when is true inside of ReportActionCompose component, like:

useEffect(() => {
        if (!shouldForceComposerFocus) {
            return;
        }
        focus();
    }, [shouldForceComposerFocus]);

Result:

Leaving.thread.keyboard.issue.mp4

[Christinadobrzyn]

collecting proposals!