[$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.

[shahinyan11]

Sorry my bad. @jeremy-croff is right , The RC and solution in my proposal Is not correct

[getusha]

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

@jeremy-croff looks like this was present for over 6 months.

[bernhardoj]

Looks like caused by #33546

Removing shouldEnableMaxHeight from useWindowDimensions solves the issue

App/src/components/ScreenWrapper.tsx

Line 130 in 4a885f5

const {windowHeight, isSmallScreenWidth} = useWindowDimensions(shouldEnableMaxHeight);

[shubham1206agra]

@bernhardoj Can you test the same on latest main and confirm that the problem persist?

[bernhardoj]

yes, still reproducible on latest main

[suneox]

let me check on this case why the input still focus but keyboard not open, may be it related to this proposal

[getusha]

will be handled by @suneox, as a regression.

[suneox]

will be handled by @suneox, as a regression.

Sure I have created PR and waiting for review

[getusha]

@shubham1206agra i believe this PR is awaiting your review #37147

[shubham1206agra]

Yes I will review it shortly

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[getusha]

#37147 merged and deployed to staging

[mvtglobally]

Issue not reproducible during KI retests. (First week)

[kadiealexander]

@getusha I think no one is needing payment here as this was a regression of #33546 and was fixed and reviewed by the same people assigned to the OG issue, could you please confirm?

[getusha]

I think no one is needing payment here as this was a regression of #33546 and was fixed and reviewed by the same people assigned to the OG issue,

Yes, we can close it.

[melvin-bot]

@kadiealexander @getusha this issue was created 2 weeks ago. Are we close to approving a proposal? If not, what's blocking us from getting this issue assigned? Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[melvin-bot]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸