[$500] mWeb - Login - When magic code page is displayed, many of the page elements are missing

[lanitochka17]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

Version Number: 1.4.43-7
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers): vdargentotest+mweb022024.2@gmail.com
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: Applause - Internal Team
Slack conversation:

Action Performed:

1. Go to https://staging.new.expensify.com/r/4098419659819887
2. Navigate to the top of the conversation
3. Tap on sign in
4. Enter an email address and tap on "Continue" button
5. Verify that only the top part of the page is fully visible
6. Tap on any of the input fields
7. Verify that the whole page is now completely visible

Expected Result:

The magic code page should have all of its elements fully visible without the need to tap on the inputs

Actual Result

Many of the page elements are missing until an input field is tapped

Workaround:

Unknown

Platforms:

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

• Android: Native
• Android: mWeb Chrome
• iOS: Native
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Add any screenshot/video evidence

Bug6387422_1708548142823.Fqoa6468_1_.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01acd63de5f6f153b1
• Upwork Job ID: 1760889422764716032
• Last Price Increase: 2024-03-08

[melvin-bot]

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

[lanitochka17]

@bz FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01acd63de5f6f153b1

[melvin-bot]

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

[shahinyan11]

Proposal

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

mWeb - Login - When magic code page is displayed, many of the page elements are missing

What is the root cause of that problem?

Regression

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

Revert this part of code to previous version. Example below

  onBlur={() =>
      // This delay is to avoid the validate being called before google iframe is rendered to
      // avoid error message appearing after pressing google signin button.
      setTimeout(() => {
          if (firstBlurred.current || !Visibility.isVisible() || !Visibility.hasFocus()) {
              return;
          }
          firstBlurred.current = true;
          validate(login);
      }, 500)
  }

What alternative solutions did you explore? (Optional)

[jeremy-croff]

Proposal

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

When we go through the modal sign in flow, we break the layout when hiding the keyboard, and navigating to the next screen. In this ticket for example you can observe they hide the keyboard, and click next. The following page's layout is not adjusted and has green space where the keyboard is supposed to be. This is how the bug is reproduced in the sign in modal ( not scrolling on the report )

What is the root cause of that problem?

this signin modal has shouldEnableMaxHeight for a layout that changes.. this prevents it from responding to the layout change.

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

We can remove shouldEnableMaxHeight on the signin modal in order for it to respond to the changes again.

What alternative solutions did you explore? (Optional)

[getusha]

Regression

@shahinyan11 could you specify which PR caused the regression?

[jeremy-croff]

onBlur={() =>
// This delay is to avoid the validate being called before google iframe is rendered to
// avoid error message appearing after pressing google signin button.
setTimeout(() => {
if (firstBlurred.current || !Visibility.isVisible() || !Visibility.hasFocus()) {
return;
}
firstBlurred.current = true;
validate(login);
}, 500)
}

I'm still able to reproduce it with the rca steps I listed, after reverting this change.