Switching between chats using LHN causes chats to get stuck offscreen

[arielgreen]

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

---

Expected Result:

When switching between chats in mobile web for E.Cash, I expect the chat to load and display correctly

Actual Result:

When switching between chats in mobile web for E.cash in Chrome on iOS, the second chat you switch to is not displayed correctly, and is off-screen

Action Performed:

1. Sign in to Expensify.Cash on Chrome or Safari on iOS
2. Tap on the chat switcher, and switch to a chat with a user (or use the search function)
3. Tap back to the chat list
4. Tap on the chat switcher again, and switch to a chat with a different user
5. The chat should render mostly off-screen, with most of the chat content not visible (if it doesn't, switch back to the other chat - it is inconsistent!)

Workaround:

You are forced to reload the page.

Platform:

Web: No
iOS: No
Android: No
Desktop App: No
Mobile Web: iOS - Yes | Android - No

Version Number: v1.0.2-73
Notes/Photos/Videos: Any additional supporting documentation

Here's a short recording of this happening:

Here's how the chat renders:

https://www.upwork.com/jobs/~01a09bd14ffed37ba9
https://github.com/Expensify/Expensify/issues/157743

[attaradev]

Hello @tylerkaraszewski, I would love to look into this.
Working on a proposal.

[kaushiktd]

Hi,

This is Kaushik here. I would like to put a technical explanation for this,

1. It may be an animation interpolate issue, first we will deploy to our local system and check with a real device with debugging.

[kidroca]

There's a good chance this might be solved by the loading transition proposed here: #2154, I can take a look, when I start working, and report back

[marcaaron]

I'm not sure how to solve this yet but, it seems like it would be related to the DrawerNavigator implementation in react-navigation

[kidroca]

I've found another way to recreate it:

1. From Home
2. Tap the FAB button
3. select New Chat

2021-04-01.15-41-29.mp4

I think I found what's causing it:

https://github.com/Expensify/Expensify.cash/blob/68866790ce210cfb78c41e84cb079b6b192fa5b0/src/components/OptionsSelector.js#L89-L91

Removing this fixes the issue when you tap the search icon or when you open a new chat.
I don't know why (yet 😀) but focusing causes navigation transitions to stop

In summary the issue seems related to focusing, focusing quickly on a field during animation causes this, but it's perhaps something that should be addressed in React Navigation

Using the InteractionManager like this does not help:

        InteractionManager.runAfterInteractions(() => {
            this.textInput.focus();
        });

...and (am I getting annoying with this 😄) removing input autofocus on mobile (mWeb as well, aka small screens) would "fix" this

---

You can use desktop safari for more debugging options

[tylerkaraszewski]

@marcaaron - what do you think about this analysis?

[marcaaron]

I'm not able to reproduce this. But if disabling the "auto focus" behavior will fix it then we are discussing this possibility here and if we do decide to remove the auto focus for inputs on mobile then this should be fixed by default. cc @trjExpensify since this is another potential issue related to auto focus.

[parasharrajat]

I tested it. Autofocus has nothing to do with it. It still exists. Easier reproduction for this is to try to change the resolution in a responsive mode in the browser.

bug.mp4

[kidroca]

Autofocus has nothing to do with it

That's a bit harsh ☹️, In my attempts removing the focus in OptionsSelector.js fixed the issue when I open a New Chat and when I open Search. It did not fix the issue for switching between chats as the focusing handled by a different component there

Changing the size dynamically might be another way to cause this problem.
Some bugs can stem from a combination of factors

Autofocus.issues.mp4

[kidroca]

I've researched the handling of input fields in mobile Safari further.

When an input is focused mobile Safari would try to position it nicely in the middle for the user
In our case this happens while the drawer is still moving

Here is a good explanation: https://gist.github.com/kiding/72721a0553fa93198ae2bb6eefaa3299

When an input element gets focused, iOS Safari tries to put it in the center by scrolling (and zooming.)
Zooming can be easily disabled using a meta tag, but the scrolling hasn't been quite easy.

And here's the same problem reported on stackoverflow: https://stackoverflow.com/a/6918582/4834103

I've had this problem before where a fixed size webapp (built for iPad) gets partially scrolled out of view by the browser because it tries to center the text-field in the view.

Why does calling focus() break my CSS transition?

Changing the viewport dimensions might be causing the same issue, but I think it's a lot less likely to happen IRL

[kidroca]

There's a ticket related to viewport size change on react navigation: react-navigation/react-navigation#8551

Thought specifically for the autofocus cases:

• an action is selected
• content with a field is mounted outside the viewport (abs position?)
• the field is focused during the transition and the transition stops

I've also recreated this on mobile Chrome

[marcaaron]

It does seem like perhaps the fix would be in react-navigation based on that issue. Curious what some debugging might reveal.

Not sure if react-navigation is using a CSS transition in this case, I believe it's using react-native-reanimated for the drawer and setting the translateX property. Not sure if it helps, but it doesn't seem to happen consistently which makes me wonder if some slow running JS is causing the translateX value to be incorrect.

[marcaaron]

I am somewhat convinced that slow running JS is the culprit here and wonder if just delaying the render of the ReportScreen until after the drawer transition completes can help prevent this. Not sure the drawer has a transitionEnd event we could listen for, but that might be something to look into.