[Hold for payment][$500] mWeb - Login - Sometimes I can't reach the bottom of the page

[kbecciv]

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.41.1
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):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by: Applause - Internal Team
Slack conversation:

Issue found when executing PR #35509

Action Performed:

1. On the log in screen, tap on the email field so the keyboards opens
2. Swipe to the bottom of the page
3. Swipe to the top of the page
4. Repeat steps 2 and 3 until the issue appears

Expected Result:

User should be able to swipe without problems.

Actual Result:

Sometimes I can't reach the bottom of the page while I have the keyboard on.

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

Bug6379445_1707921101943.VEKM5252.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0143dd11e70fd777fb
• Upwork Job ID: 1757793927154425856
• Last Price Increase: 2024-02-14
• Automatic offers:
• jjcoffee | Reviewer | 0
• suneox | Contributor | 0

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~0143dd11e70fd777fb

[melvin-bot]

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

[melvin-bot]

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

[suneox]

Proposal

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

mWeb - Login - Sometimes I can't reach the bottom of the page

What is the root cause of that problem?

This issue happens on mWeb/Safari using the virtual viewport when focusing on an input and we have double scroll (second from 6 - 10 on the issue video description ) when scrolling to the end of SignInPage.js so the scroll will be conflict when scrolling to the bottom.

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

At SignInPageInner instead of using View we will use ScreenWrapper with shouldEnableMaxHeight

    return (
        // Bottom SafeAreaView is removed so that login screen svg displays correctly on mobile.
        // The SVG should flow under the Home Indicator on iOS.
+       <ScreenWrapper
+           shouldEnableMaxHeight={shouldEnableMaxHeight}
            style={[styles.signInPage, StyleUtils.getSafeAreaPadding({...safeAreaInsets, bottom: 0, top: shouldUseNarrowLayout ? 0 : safeAreaInsets.top}, 1)]}
            testID={SignInPageInner.displayName}
        >
            <SignInPageLayout
              ....

Add new props shouldEnableMaxHeight for SignInPage

const propTypes = {
    account: PropTypes.shape({
        .....
    }),
    ......
+   shouldEnableMaxHeight: PropTypes.bool,
};

const defaultProps = {
    account: {},
    credentials: {},
    activeClients: [],
    preferredLocale: '',
+   shouldEnableMaxHeight: true,
};

and update SignInModal to

        <ScreenWrapper
            style={[StyleUtils.getBackgroundColorStyle(theme.PAGE_THEMES[SCREENS.RIGHT_MODAL.SIGN_IN].backgroundColor)]}
            includeSafeAreaPaddingBottom={false}
            shouldEnableMaxHeight
            testID={SignInModal.displayName}
        >
            <HeaderWithBackButton onBackButtonPress={() => Navigation.goBack()} />
+           <SignInPage shouldEnableMaxHeight={false} />
        </ScreenWrapper>

Due to SignInModal has set shouldEnableMaxHeight

POC

Screen.Recording.2024-02-15.at.10.09.02.mov

What alternative solutions did you explore? (Optional)

[jjcoffee]

Thanks for the proposal @suneox! I'd appreciate some further detail on why this only (seems to) affect iOS/mWeb and not other platforms. I also feel your proposal isn't clear on why the solution works and how it relates to the root cause.

[suneox]

why this only (seems to) affect iOS/mWeb and not other platforms.

on mWeb/Safari has a scrolling issue when focusing on input, which will trigger a virtual viewport to push the input to a safe area view, when we scroll to the end of the content, we can see an unexpected area if we continue to scroll down we will scroll on virtual viewport (second 10 - 20). when scrolling up if a touch point is on the virtual viewport then scrolling down this issue will happen (second 27 - 34)

Demo issue

Screen.Recording.2024-02-16.at.00.15.14.mov

I also feel your proposal isn't clear on why the solution works and how it relates to the root cause.

When we set shouldEnableMaxHeight on ScreenWrapper it will avoid scrolling on the virtual viewport so It can resolve this issue

@jjcoffee you can try on the tested branch

[jjcoffee]

Gotcha, thanks for providing the extra details! Happy to go with @suneox's proposal here.

🎀👀🎀 C+ reviewed