[Chat] [IOU] Mobile keyboard should not be displayed at IOUConfirm step

If you haven’t already, check out our contributing guidelines for onboarding!

---

Problem

The mobile alphabetic keyboard is being displayed on physical devices when the IOUAmount page is displayed. It isn’t always consistent but occurs most of the time with no obvious pattern. This occurs on both Android and iOS physical devices.

To reproduce this issue, apply the following diff so that ‘New chat’ and ‘New group’ launches the IOUModal: Make sure you include the final new line!

diff --git a/src/components/CreateMenu.js b/src/components/CreateMenu.js
index 7c7afe3a..f311b4a1 100644
--- a/src/components/CreateMenu.js
+++ b/src/components/CreateMenu.js
@@ -53,12 +53,12 @@ class CreateMenu extends PureComponent {
             {
                 icon: ChatBubble,
                 text: 'New Chat',
-                onPress: () => this.setOnModalHide(() => Navigation.navigate(ROUTES.NEW_CHAT)),
+                onPress: () => this.setOnModalHide(() => Navigation.navigate(ROUTES.IOU_REQUEST)),
             },
             {
                 icon: Users,
                 text: 'New Group',
-                onPress: () => this.setOnModalHide(() => Navigation.navigate(ROUTES.NEW_GROUP)),
+                onPress: () => this.setOnModalHide(() => Navigation.navigate(ROUTES.IOU_BILL)),
             },
         ].map(item => ({
             ...item,

https://user-images.githubusercontent.com/10736861/111474608-25f02680-8724-11eb-899a-f860edf5ef80.mp4

Desired Solution

The alphabetic keyboard should not be displayed, as we are not rendering an Input field on mobile:

Upwork Link: https://www.upwork.com/ab/applicants/1372398296191315968/job-details

[marcaaron]

Here’s what I am thinking a complete fix for this should be:

1. Disable the “modal visibility aware” autofocus logic for the chat comment input when:

   • we are using a native platform
   • we are using mobile web (defined as anything that has a touch screen or software keyboard)

2. Modify this logic here so that it will only focus the input on desktop/web + when the report isFocused (if necessary) https://github.com/Expensify/Expensify.cash/blob/e9e726aa2a2f24ae98e88d9aa166acf4e8036ecb/src/pages/home/report/ReportActionCompose.js#L75-L78

3. Undo this change here https://github.com/Expensify/Expensify.cash/blob/e9e726aa2a2f24ae98e88d9aa166acf4e8036ecb/src/pages/home/report/ReportActionCompose.js#L261-L262

We should only want to “autoFocus” on web/desktop (see rules of step 1). So, we require a custom implementation for this anyway instead of just passing autoFocus directly to the TextInput

1. Finally we should make sure that the keyboard is always dismissed when navigating from a chat to the sidebar/drawer content. @kidroca I think you’ve mentioned that 4 will no longer be necessary once we do the changes here

[kidroca]

Yes, I’d like that. Definitely needs more discussion and I don’t want to spam the current ticket. I’ll open a new ticket when I’m done with my current work.