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

[MelvinBot]

Triggered auto assignment to @mountiny (Exported), see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[kadiealexander]

@mountiny do you have any thoughts on @thecodingeek's proposal above? :)

[mountiny]

Hello @thecodingeek! Great to have you onboard. Thank you very much for your proposal. I must admit I like @parasharrajat more general solution a little bit more 😬 Essentially, as you proposed to add the Keyboard.dismiss() into the callback, I believe it would be better to place the keyboard dismissal into the openDrawer() function in Navigation.

We would want to close the keyboard anytime we go back to the Drawer so it make sense to put it into that place. Therefore, I am sorry, but I will pick @parasharrajatfor this job as he has reported this issue and proposed solid solution before you.

@thecodingeek Please, have a look around existing issues with Help Wanted label. I am sure you will be able to solve some quickly! 😊

@parasharrajat Could you please apply for the job on Upwork and let @kadiealexander once you do so 😊

[thecodingeek]

Hello @mountiny, hmm if the keyboard is supposed to be closed anytime user moves to Drawer, then it is better to put the same in openDrawer() method.

I will check some other issue too :)

[botify]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.1.14-4 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• close Keyboard when opening drawer #6205

If no regressions arise, payment will be issued on 2021-11-22. 🎊

[kadiealexander]

@parasharrajat I've hired you in Upwork, could you please let me know once you've accepted so I can get payment out quickly for you? Thanks!

[parasharrajat]

@kadiealexander Done

[kadiealexander]

Paid $500 for reporting and fixing, thanks @parasharrajat!!