[HOLD for payment 2021-11-22] Keyboard is not dismissed if the user navigates to LHN when editing a comment - Reported by: @parasharrajat

[isagoico]

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

---

Action Performed:

1. Edit a message in any chat on mobile.
2. Click the edit box to show the keyboard.
3. From the UI back arrow, go back to LHN.
4. Keyboard is not closed.

---

5. Minimize the app from Home button android.
6. Maximize the app from the recent apps, LHN is shown but keyboard is active.

Expected Result:

Keyboard should be dismissed when navigating to LHN.

Actual Result:

Keyboard is not dismissed when navigating to LHN.

Workaround:

User can dismiss the keyboard manually.

Platform:

Where is this issue occurring?

• iOS
• Android

Version Number: 1.1.12-0

Reproducible in staging?: Yes
Reproducible in production?: Yes

Logs: https://stackoverflow.com/c/expensify/questions/4856

Notes/Photos/Videos: Any additional supporting documentation

keyboard-edit.mp4

Expensify/Expensify Issue URL:

Issue reported by: @parasharrajat
Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1635751023286900

View all open jobs on GitHub

[MelvinBot]

Triggered auto assignment to @tylerkaraszewski (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[parasharrajat]

There are two causes for this issue.

1. When we load a new report and it has an old edited message. then they will be autofocused and the keyboard will open.
2. When we edit a message on any report and use the UI back button to go back. The keyboard does not close.

Proposal

1. Point 1 will be solved in Remove autofocus from the Edit messages and focus on the manual action #6138.
2. For point 2, we can use Keyboard.dismiss to close the keyboard .

We previously disabled this behavior which comes by default with React navigation for a reason.

App/src/libs/Navigation/AppNavigator/AuthScreens.js

Line 260 in 6299f48

keyboardHandlingEnabled={false}

I think we should not revert that change instead I have a generic approach to close all the keyboards in this case. When users navigate back to LHN, we call

App/src/libs/Navigation/Navigation.js

Line 41 in 6299f48

function openDrawer() {

so we can add Keyboard.dismiss here so that it works well without making it complicated for other components to manage back behavior.

[tylerkaraszewski]

Seems like an obvious external issue.

[MelvinBot]

Triggered auto assignment to @kadiealexander (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.

[kadiealexander]

Upwork job is live: https://www.upwork.com/jobs/~01cc79eda5fa4843d7

[thecodingeek]

Hey everyone ! I am new here. I just saw this on Upwork and as per the requirement first I looked into the issue. So here are my findings,

Seems like this UI is designed with Tablets in mind as well, so on the mobile it is implemented as the separate screens but those are actually not.

HeaderView.js file has the following code,

{props.isSmallScreenWidth && (
                    <Tooltip text={props.translate('common.back')}>
                        <Pressable
                            onPress={props.onNavigationMenuButtonClicked}
                            style={[styles.LHNToggle]}
                        >
                            <Icon src={BackArrow} />
                        </Pressable>
                    </Tooltip>
                )}

This file shows back button only for the small screens. On pressing the back button it opens the LHN (I think it is left hand navigation) but the Edit Comment text field still remains in focus. If you type something on keyboard even after coming to LHN and then open the same thread again, you will see what you typed there.

So the text field never looses the focus even on pressing the back button, therefore the keyboard remains visible.

A quick solution just to fix this issue is call Keyboard.dismiss() in ReportScreen.js. Like this,

<HeaderView
                    reportID={reportID}
                    onNavigationMenuButtonClicked={() => {
                        Keyboard.dismiss()
                        Navigation.navigate(ROUTES.HOME)
                    }}
                />

This will forcefully close the keyboard, but note that the text field still remains in focus even if we do this. We can work more on this together. :)