BUG: [mweb-safari] keyboard remains open while navigating back to LHN using fingers from right to left reported by @gadhiyamanan

[kavimuru]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Action Performed:

1. Action performed:
2. Open any conversation
3. Open keyboard
4. Close chat by swiping from left to right

Expected Result:

keyboard should be closed

Actual Result:

keyboard remains open

Workaround:

unknown

Platform:

Where is this issue occurring?

• Mobile Web - Safari

Version Number: v1.2.17-4
Reproducible in staging?: y
Reproducible in production?: y
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos:

https://user-images.githubusercontent.com/43996225/196539070-780a6b4d-9ab4-495f-a592-f428a83e9986.MP4
https://user-images.githubusercontent.com/43996225/196539158-b33a7547-3df2-490d-ba7a-8766dcf6fb03.mp4

Expensify/Expensify Issue URL:
Issue reported by: @gadhiyamanan
Slack conversation: https://expensify.slack.com/archives/C01GTK53T8Q/p1666117289545729

View all open jobs on GitHub

[melvin-bot]

Triggered auto assignment to @sakluger (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.

[sakluger]

I updated the 4th Action Performed to relect the video (previously it said Open the chat by swiping from right to left, but the video showed the user closing the chat by swiping from left to right).

I was able to reproduce the issue in mobile Safari, and confirmed that there are no other open issues for this bug.

[melvin-bot]

Current assignee @sakluger is eligible for the External assigner, not assigning anyone new.

[melvin-bot]

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

[melvin-bot]

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

[sakluger]

Internal Upwork post: https://www.upwork.com/ab/applicants/1582905344124416000/job-details
External Upwork post: https://www.upwork.com/jobs/~01c7b98c9136a4348a

[Nodirbek75]

This issue can be solved by adding listener "beforeRemove" and inside function closing keyboard manually.

[Babur171]

You can use KeyboardAvoidingView in scrollView. Then you solve this issue

[rushatgabhane]

@Nodirbek75 @Babur171 thanks for your proposal!

Could you please explain why the issue is happening and how exactly you plan to fix it?
We expect a brief technical writeup from propsals. (you can take a look at a few closed issues that have a proposal)

[Babur171]

@rushatgabhane can you share me your code?

[rushatgabhane]

@Babur171 I recommend that you read contributing.md before starting. All the code is available on https://github.com/Expensify/App

[sakluger]

Price doubled!

[rushatgabhane]

@sakluger time to double?

[s77rt]

I can't reproduce, maybe it's fixed already?

[s77rt]

Proposal

diff --git a/src/libs/Navigation/Navigation.js b/src/libs/Navigation/Navigation.js
index e937e5015..8c484ce1e 100644
--- a/src/libs/Navigation/Navigation.js
+++ b/src/libs/Navigation/Navigation.js
@@ -1,6 +1,5 @@
 import _ from 'underscore';
 import lodashGet from 'lodash/get';
-import {Keyboard} from 'react-native';
 import {DrawerActions, getPathFromState, StackActions} from '@react-navigation/native';
 import Onyx from 'react-native-onyx';
 import Log from '../Log';
@@ -66,7 +65,6 @@ function openDrawer() {
     }
 
     navigationRef.current.dispatch(DrawerActions.openDrawer());
-    Keyboard.dismiss();
 }
 
 /**
diff --git a/src/libs/Navigation/NavigationRoot.js b/src/libs/Navigation/NavigationRoot.js
index 775d89f31..9dba24585 100644
--- a/src/libs/Navigation/NavigationRoot.js
+++ b/src/libs/Navigation/NavigationRoot.js
@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import {Keyboard} from 'react-native';
 import {NavigationContainer, DefaultTheme, getPathFromState} from '@react-navigation/native';
 import {useFlipper} from '@react-navigation/devtools';
 import Navigation, {navigationRef} from './Navigation';
@@ -60,7 +61,10 @@ const NavigationRoot = (props) => {
                     style={styles.navigatorFullScreenLoading}
                 />
             )}
-            onStateChange={parseAndLogRoute}
+            onStateChange={() => {
+                Keyboard.dismiss();
+                parseAndLogRoute();
+            }}
             onReady={props.onReady}
             theme={navigationTheme}
             ref={navigationRef}

Details

The issue is more like a bug in Safari I suppose. The swipe gesture in Safari will trigger the browser back functionality. On chrome the browser back functionality also closes the keyboad. On Safari you have to do it yourself. Building on that we can simply call Keyboard.dismiss() on navigation change and since I see no case where the keyboard should stay open after navigation change I have put the logic on the root NavigationContainer.

Kooha-2022-11-16-15-48-11.mp4

---

There is another similar issue which is more annoying that effects all the browsers (maybe native devices too) which is related to modals; Open any modal (e.g. Emoji Picker) press back button / swipe. The modal will stay there and will cause the app to be unusable. I do have a fix for that but I didn't include it in my above proposal; You can think that this can be solved using the same approach used here (on navigation change, close modal) but i have a better solution to fix the modal itself I have two proposals already that covers this #10414 (comment) and #12521 (comment)

[JmillsExpensify]

Switched out weekly for monthly given that the navigation project is large and has no defined ETA.

[JmillsExpensify]

Still on hold for the navigation project.

[JmillsExpensify]

Same same.

[deetergp]

Still in a holding pattern

[JmillsExpensify]

Same same.

[deetergp]

Still on hold.

[deetergp]

MOTS (more of the same)

[JmillsExpensify]

Alright, circling back on this one, I'm no longer able to reproduce. The keyboard consistently closes when going back to the LHN from a chat.

RPReplay_Final1687812788.MP4

Accordingly, I think we're ready to pay @gadhiyamanan for reporting. If anyone disagrees or is able to achieve a different result, please comment in this issue. We'll be closing out payments later this week.

[deetergp]

@JmillsExpensify Have we paid @gadhiyamanan for reporting? Can we close this one out?

[JmillsExpensify]

Not yet, still working through issues. Though I will aim to circle back on this soon.

[deetergp]

I believe we are still holding.

[JmillsExpensify]

Alright, ready to close this out. @gadhiyamanan I've just send you an offer for reporting on Upwork.

[gadhiyamanan]

@JmillsExpensify offer accepted, thanks!

[JmillsExpensify]

All paid out! Thank you, closing.