App: [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

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 23 (23 by maintainers)

Most upvoted comments

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

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)
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
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

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

marcaaron on Apr 6, 2021

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.

kidroca on Mar 26, 2021

@kidroca Thanks for bringing in this and suggesting an approach. I am well aware of the issue you mentioned. That’s the only reason to Introduce the HOC approach. With this, we can manage the focus more accurately. I have some thoughts on fixing the mentioned issue with much simplicity.

parasharrajat on Mar 26, 2021

Awesome, as discussed - I’ve hired @parasharrajat via Upworks. Thanks for all your help @Maftalion !

jliexpensify on Mar 23, 2021

@jliexpensify yeah, that’s right.

Thanks to both of you for figuring this issue out.

Julesssss on Mar 22, 2021

Hi @parasharrajat and @Maftalion - thanks for both sharing potential solutions. So that I’m 100% clear on things, was it decided that Rajat was going to take this on instead?

If so, please let me know and I’ll look into changing this in Upwork. @parasharrajat if you are taking this on, do you mind submitting a proposal in Upwork as well?

cc @Julesssss re: the discussion on not using hooks

jliexpensify on Mar 21, 2021

@Julesssss I’m fine with deferring this task to @parasharrajat since he took the time to figure out how to do it without using the hook. My only suggestion would be to set it up as a HOC so this can used on other screens as well without needing all the boilerplate.

I also found another way to fix this as well, if we just use this.props.isSmallScreenWidth && !Navigation.isDrawerOpen() instead of isScreenFocused then we can achieve the same result.

Maftalion on Mar 20, 2021