[HOLD #11768] [$8000] Chat room wobbles while opening up on mobile Chrome or Safari

[hayata-suenaga]

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. Open the production NewDot on mobile Chrome or Safari at https://new.expensify.com
2. Open a chat room several times
3. Check that chat room wobbles while opening and that
4. Extra: Open the same chat room several times. Sometimes the room opens up with keyboard and sometimes without keyboard. I'm not sure if this is the expected behavior.

Expected Result:

Opening chat room should be smooth

Actual Result:

Opening chat room is not smooth

Workaround:

Users can still use the app.

RPReplay_Final1676603610.MOV

Platforms:

Which of our officially supported platforms is this issue occurring on?

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: v1.2.72-1
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation
Expensify/Expensify Issue URL:
Issue reported by:
Slack conversation:

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01902d9184e4d55eb3
• Upwork Job ID: 1626701164545208320
• Last Price Increase: 2023-03-10

[MelvinBot]

Triggered auto assignment to @JmillsExpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[MelvinBot]

Bug0 Triage Checklist (Main S/O)

• This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
• This bug is not a duplicate report (check E/App issues and #expensify-bugs)
  • If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
• This bug is reproducible using the reproduction steps in the OP. S/O
  • If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
  • If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
• This issue is filled out as thoroughly and clearly as possible
  • Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
• I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

[JmillsExpensify]

Hmm, this is an interesting one. I can pretty consistently reproduce the screen wobbling and bouncing around in the following flow as well:

• Global create
• New group
• Choose members

And at that point, the chat wobbles around in a similar fashion. I have a feeling that it's the combination of the keyboard becoming active and then the room sliding into view at the same time? In any case, Let's open this open to the community and see if we have any realistic fixes or if this is a known upstream issue.

[JmillsExpensify]

This bug is not a duplicate report (check E/App issues and #expensify-bugs)

I did search /App and #expensify-bugs and wasn't able to find anything specific to this issue, though I do know we've had plenty of discussions around transitions and animations in the app.

[MelvinBot]

Job added to Upwork: https://www.upwork.com/jobs/~01902d9184e4d55eb3

[MelvinBot]

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

[MelvinBot]

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

[MelvinBot]

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

[priyeshshah11]

Proposal

Please re-state the problem that we are trying to solve in this issue.

Stop chat from wobbling when opened (mostly happens for the first time/empty chats)

What is the root cause of that problem?

It is due to several animations happening at the same time i.e. keyboard closing from the create chat page, screen transition & keyboard opening up on the new chat page

What changes do you think we should make in order to solve the problem?

We should dismiss the keyboard on the create chat page first before navigating to the chat page and then we should delay opening the keyboard on the chat page until the screen transition has been completed.

Optionally, we can even disable the initial keyboard focus as it is not clear & consistent from a user's perspective (I would expect the same keyboard behaviour every time I open a chat, either it should be focused every time or closed every time.)

@aimane-chnaif @JmillsExpensify

[JmillsExpensify]

@aimane-chnaif Thoughts on the above?

[youssef-lr]

We seem to auto focus on the composer the first time we open a new chat. Disabling this should be straightforward and would easily fix the issue, but I'm not sure we would want to go with that. What do you think @JmillsExpensify?

[aimane-chnaif]

I agree with @youssef-lr
It's intended behavior to auto-focus composer when open new chat first time.
I am not sure when was discussed initially but this is the last context I read in slack channel:

Here's what I found so far in github:

First PR which introduced this: #4921
@mallenexpensify's comment on that issue

---

So I don't think removing autofocus is a solution here.

---

[priyeshshah11]

We should dismiss the keyboard on the create chat page first before navigating to the chat page and then we should delay opening the keyboard on the chat page until the screen transition has been completed.

What about this @aimane-chnaif ?

[aimane-chnaif]

@priyeshshah11 can you please share 2 videos on mSafari? (before-fix and after-fix)

[JmillsExpensify]

I also agree with @youssef-lr

[priyeshshah11]

@priyeshshah11 can you please share 2 videos on mSafari? (before-fix and after-fix)

I will post the videos later today.

[JmillsExpensify]

Interesting. That's seems like a pretty convincing reason to potentially put this issue on hold and wait until we upgrade to the latest version of react-native-web as well as finishing up the react-navigation refactor.

@aimane-chnaif @youssef-lr what do ya'll think?

[youssef-lr]

This sounds good to me, going to add a HOLD.

[JmillsExpensify]

Nice, also added this to the main tracking issue.

[youssef-lr]

Moved to monthly based on HOLD.

[youssef-lr]

Seems like with this PR merged this issue is fixed, can you confirm please @hayata-suenaga @aimane-chnaif?

[aimane-chnaif]

Here's link for testing that branch

[youssef-lr]

bump! Is this fixed now and can be off hold? I tested this recently and I sort of can still see a wobble.

[mountiny]

I believe this issue is also similar/ same rootcause so we could have only one of these #7737

[aimane-chnaif]

Well, I think it's different issue.
This issue is about switching pages with auto-focus input and showing keyboard (vertical issue), while #7737 is related to swipe animation (horizontal issue).

[mountiny]

Thanks for confirming, is this still reproducible? @aimane-chnaif ?

[aimane-chnaif]

#11768 was already done. I think it's much improved but still not smooth on mSafari.
@hayata-suenaga can you please test again?

[hayata-suenaga]

It's much better now
https://github.com/Expensify/App/assets/98560306/13d448db-2e7f-4367-a9c2-bfd864e503d3

Let's close this out

[JmillsExpensify]

Note for myself. No payout required here (already filed correctly in the project).