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

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:

Go to URL https://staging.new.expensify.com/ on Android
Login with any account
Navigate to any conversation
Start a thread and send some messages
Tap and hold on a message and choose Reply in Thread
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?

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

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

@Christinadobrzyn

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

@sobitneupane

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

@quinthar

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

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

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

collecting proposals!

watching - #41128

@Christinadobrzyn

Hey @Christinadobrzyn, I'm going to try and move that linked issue forward.

@Julesssss

thanks @Julesssss! I'll keep an eye on #41128

monitoring - #41128

PR - #41128 is done and I think this is resolved.

Testing again and the keyboard shows after leaving a thread.

screenRecording-28-5-2024-16-8.mp4

Gonna ask QA to test again. https://expensify.slack.com/archives/C9YU7BX5M/p1716883797729199

Issue is still reproducible on Android mWeb

1953885561340247456az_recorder_20240528_103525.mp4

@sobitneupane

hum @sobitneupane can you restest? I'm not able to reproduce as is above #35494 (comment)

@Christinadobrzyn

@Christinadobrzyn I could not reproduce the issue in Android/Chrome.

@sobitneupane

Awesome - let's close! thanks for checking @sobitneupane!

Navigation Menu

Repository navigation

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

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Proposal

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

What is the root cause of that problem?

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

108 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Activity

melvin-bot commented on Jan 31, 2024

melvin-bot commented on Jan 31, 2024

melvin-bot commented on Jan 31, 2024

kbecciv commented on Jan 31, 2024

Christinadobrzyn commented on Jan 31, 2024

samilabud commented on Jan 31, 2024

Proposal

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

What is the root cause of that problem?

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

Christinadobrzyn commented on Feb 1, 2024

108 remaining items

Christinadobrzyn commented on May 3, 2024

Julesssss commented on May 3, 2024

Christinadobrzyn commented on May 8, 2024

Christinadobrzyn commented on May 14, 2024

Christinadobrzyn commented on May 21, 2024

Christinadobrzyn commented on May 28, 2024

isagoico commented on May 28, 2024

Christinadobrzyn commented on Jun 5, 2024

sobitneupane commented on Jun 6, 2024

Christinadobrzyn commented on Jun 7, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions