[HOLD for payment 2025-02-04] [HOLD for payment 2025-01-24] [$250] mWeb/Safari - BA - The confirmation button jumps when returning to the previous page

[IuliiaHerets]

If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] to request to join our Slack channel!

---

Version Number: v9.0.73-6
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: N/A
If this was caught during regression testing, add the test name, ID and link from TestRail: n/a
Email or phone of affected tester (no customers): n/a
Issue reported by: Applause Internal Team

Action Performed:

Precondition: Navigate to the add bank account modal in Workspace settings
Start and follow the flow for adding a Verifying bank account using the credentials found below until you reach the Company info page

1. Activate the compose box
2. Tap the back arrow button

Use Regions Bank
Username: user_good | Password: pass_good
Account type: Plaid Saving (2nd option)
CompanyName: Alberta Bobbeth Charleson
CompanyTaxID: 123456789
First Name: Alberta
Last Name: Charleson

Expected Result:

The confirmation button doesn't jump when returning to the previous page

Actual Result:

The confirmation button jumps when returning to the previous page

Workaround:

Unknown

Platforms:

• Android: Standalone
• Android: HybridApp
• Android: mWeb Chrome
• iOS: Standalone
• iOS: HybridApp
• iOS: mWeb Safari
• MacOS: Chrome / Safari
• MacOS: Desktop

Screenshots/Videos

Bug6689379_1733785616993.RPReplay_Final1733783851.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021869122959863484757
• Upwork Job ID: 1869122959863484757
• Last Price Increase: 2024-12-24
• Automatic offers:
• huult | Contributor | 105503980

Issue Owner

Current Issue Owner: @CortneyOfstad

[melvin-bot]

Triggered auto assignment to @CortneyOfstad (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[CortneyOfstad]

I've been trying to test this and I cannot get it to consistently be recreated, so going to see if this can be retested.

[melvin-bot]

@CortneyOfstad Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[CortneyOfstad]

Still waiting on this being retested!

[melvin-bot]

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

[melvin-bot]

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

[M00rish]

Proposal

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

BA - The confirmation button jumps when returning to the previous page

What is the root cause of that problem?

The input elements in the CompanyStep sub-steps aren't focused.

App/src/pages/ReimbursementAccount/BusinessInfo/BusinessInfo.tsx

Lines 34 to 44 in 01c0ad9

	const bodyContent: Array<React.ComponentType<SubStepProps>> = [
	NameBusiness,
	TaxIdBusiness,
	WebsiteBusiness,
	PhoneNumberBusiness,
	AddressBusiness,
	TypeBusiness,
	IncorporationDateBusiness,
	IncorporationStateBusiness,
	ConfirmationBusiness,
	];

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

add auto-focus to CompanyStep substeps inputs using the useAutoFocusInput hook, so when it mounts input gets focused:

function NameBusiness({reimbursementAccount, onNext, isEditing}: NameBusinessProps) {
    const {translate} = useLocalize();
    const styles = useThemeStyles();
    const {inputCallbackRef} = useAutoFocusInput();
    ...
     return (
        <FormProvider
            formID={ONYXKEYS.FORMS.REIMBURSEMENT_ACCOUNT_FORM}
            submitButtonText={translate(isEditing ? 'common.confirm' : 'common.next')}
            validate={validate}
            onSubmit={handleSubmit}
            style={[styles.mh5, styles.flexGrow1]}
            submitButtonStyles={[styles.mb0]}
        >
            <Text style={[styles.textHeadlineLineHeightXXL]}>{translate('businessInfoStep.enterTheNameOfYourBusiness')}</Text>
            <InputWrapper
                ref={inputCallbackRef}
                InputComponent={TextInput}
                label={translate('businessInfoStep.businessName')}

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

• add test for these components to make sure inputs are focused when mounted

What alternative solutions did you explore? (Optional)

[CortneyOfstad]

Hey @mananjadhav! Looks like we have a proposal above for review!

Also, just a heads up that I will be OOO starting this afternoon (December 20th) and will be returning January 6th. A handful of folks on the BZ team will be online for a few days in between the 25th and the 1st, but we'll be operating with a skeleton crew. If any action is needed from a BZ perspective, please post this issue in #expensify-open-source and someone on the team will jump in. Otherwise I will review when I'm back in office.

Thank you and Happy Holidays!

[huult]

Edited by proposal-police: This proposal was edited at 2024-12-23 09:40:41 UTC.

Proposal

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

The confirmation button jumps when returning to the previous page

What is the root cause of that problem?

When we tap the back button or outside the input, the keyboard will dismiss, and the maxHeight for KeyboardAvoidingView will be updated

App/src/components/ScreenWrapper.tsx

Line 163 in a8600a1

const maxHeight = shouldEnableMaxHeight ? windowHeight : undefined;

App/src/components/ScreenWrapper.tsx

Lines 276 to 280 in a8600a1

	<KeyboardAvoidingView
	style={[styles.w100, styles.h100, {maxHeight}, isAvoidingViewportScroll ? [styles.overflowAuto, styles.overscrollBehaviorContain] : {}]}
	behavior={keyboardAvoidingViewBehavior}
	enabled={shouldEnableKeyboardAvoidingView}
	>

For mWeb Safari on iOS, when the keyboard is dismissed, there is a slight delay in updating the visual viewport. As a result, the maxHeight is not updated immediately. Due to this, the button shifts slightly, and after the maxHeight is updated, it moves to the bottom, causing a jump as described in this ticket.

Screen.Recording.2024-12-23.at.15.08.23.mov

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

As I found on Stack Overflow, as of today, there are no real solutions for this, so I suggest a workaround solution to fix the issue.

We should set the maxHeight for KeyboardAvoidingView when the keyboard is open. If the keyboard is not open, we should not set it, or if the visual viewport is fully updated, then set the maxHeight for KeyboardAvoidingView. To implement this, follow these steps:

1. We create context to listen for when the input is blurred

    function BlurContextProvider({children}: ChildrenProps) {
        const [blurState, setBlurState] = useState<boolean>(true);
        const blurContext = useMemo(
            () => ({
                blurState,
                setBlurState,
            }),
            [blurState],
        );

        return <BlurContext.Provider value={blurContext}>{children}</BlurContext.Provider>;
    }

2. We need to update blurState when the input is blurred

App/src/components/Form/FormProvider.tsx

Line 373 in 08f8314

inputProps.onBlur?.(event);

 const registerInput = useCallback<RegisterInput>(
        (inputID, shouldSubmitForm, inputProps) => {
            ...
            return {
                ...
                onBlur: (event) => {
                    ...
                    setBlurState(false);
                },
               ...
            };
        },
        [draftValues, inputValues, formState?.errorFields, errors, submit, setTouchedInput, setBlurState, shouldValidateOnBlur, onValidate, hasServerError, formID, shouldValidateOnChange],
    );

3. Update the condition to set maxHeight for KeyboardAvoidingView

App/src/components/ScreenWrapper.tsx

Lines 276 to 280 in a8600a1

	<KeyboardAvoidingView
	style={[styles.w100, styles.h100, {maxHeight}, isAvoidingViewportScroll ? [styles.overflowAuto, styles.overscrollBehaviorContain] : {}]}
	behavior={keyboardAvoidingViewBehavior}
	enabled={shouldEnableKeyboardAvoidingView}
	>

Update to:

    <KeyboardAvoidingView
        style={[
            styles.w100,
            styles.h100,
            blurState ? {maxHeight} : undefined,
            isAvoidingViewportScroll ? [styles.overflowAuto, styles.overscrollBehaviorContain] : {},
        ]}
        behavior={keyboardAvoidingViewBehavior}
        enabled={shouldEnableKeyboardAvoidingView}
    >

4. Set blurState to true when the visual viewport is fully updated.

    useEffect(() => {
        const updateDimensions = () => {
            if (!Browser.isSafari()) {
                return;
            }
            setBlurState(true);
        };

        const removeViewportResizeListener = addViewportResizeListener(updateDimensions);

        return () => {
            removeViewportResizeListener();
        };
    }, []);

POC

Screen.Recording.2024-12-23.at.14.56.14.mov

Test branch

What specific scenarios should we cover in automated tests to prevent reintroducing this issue in the future?

This is a UI bug; I don’t think code testing is needed here

What alternative solutions did you explore? (Optional)

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[melvin-bot]

@mananjadhav, @CortneyOfstad Eep! 4 days overdue now. Issues have feelings too...

[melvin-bot]

@mananjadhav @CortneyOfstad 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? 💸

[mananjadhav]

Reviewing this by tomorrow.

[mananjadhav]

I think @huult's RCA is correct and the proposal seems to be promising. But I am not sure if we'd want to implement a workaround. Taking feedback from the internal engineer on this one.

🎀 👀 🎀 C+ reviewed.

[CortneyOfstad]

@mananjadhav can you complete the checklist before EOD? Thanks!

[mananjadhav]

@CortneyOfstad The original PR was reverted, and the new PR has been merged on staging. We'll payout based on the new PR.

[mvtglobally]

Issue not reproducible during KI retests. (First week)

[yuwenmemon]

See: #55494 (comment)

We should not do a payout for this solution until @huult can update the fix for Android since it's not working there yet.

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 9.0.89-8 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• 53814 fix confirmation button jump #55494

If no regressions arise, payment will be issued on 2025-02-04. 🎊

For reference, here are some details about the assignees on this issue:

• @mananjadhav requires payment through NewDot Manual Requests
• @huult requires payment automatic offer (Contributor)

[melvin-bot]

@mananjadhav @CortneyOfstad @mananjadhav The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed. Please copy/paste the BugZero Checklist from here into a new comment on this GH and complete it. If you have the K2 extension, you can simply click: [this button]

[mananjadhav]

@huult In case you missed out on the previous comment. I did not come across it in my testing. But I didn't test it on a physical device.

See: #55494 (comment)

We should not do a payout for this solution until @huult can update the fix for Android since it's not working there yet.

[mananjadhav]

@huult Quick bump on the previous comment.

[huult]

@mananjadhav I will check it soon

[huult]

@mananjadhav Same as you, I am unable to reproduce it on my side

Screen.Recording.2025-02-03.at.16.10.10.mov

[CortneyOfstad]

@huult @mananjadhav @yuwenmemon — is this good for payment now, or is additional action still needed? Thanks for the insight!

[mananjadhav]

@yuwenmemon @IuliiaHerets Any updates on the previous comment?

[IuliiaHerets]

Hi, @yuwenmemon. Tester still can repro this issue on the mWeb/Safari in the latest build

ScreenRecording_02-05-2025.11-54-19_1.mp4

[huult]

@IuliiaHerets The video above has fixed the issue. What issue did you mention?

[mvtglobally]

Issue not reproducible during KI retests. (Second week)

[mananjadhav]

@yuwenmemon Do you still think this should be held?

[yuwenmemon]

Doesn't seem like it - @CortneyOfstad this should be good to go!

[mananjadhav]

BugZero Checklist:

• [Contributor] Classify the bug:

Bug classification

Source of bug:

• 1a. Result of the original design (eg. a case wasn't considered)
• 1b. Mistake during implementation
• 1c. Backend bug
• 1z. Other:

Where bug was reported:

• 2a. Reported on production (eg. bug slipped through the normal regression and PR testing process on staging)
• 2b. Reported on staging (eg. found during regression or PR testing)
• 2d. Reported on a PR
• 2z. Other:

Who reported the bug:

• 3a. Expensify user
• 3b. Expensify employee
• 3c. Contributor
• 3d. QA
• 3z. Other:

• [Contributor] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake.

  I couldn't find a specific offending PR for this one. It's seems we've had this since a long time.
  Link to comment: NA

• [Contributor] If the regression was CRITICAL (e.g. interrupts a core flow) A discussion in #expensify-open-source has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner.

  Link to discussion: NA

• [Contributor] If it was decided to create a regression test for the bug, please propose the regression test steps using the template below to ensure the same bug will not reach production again.

Regression Test Proposal Template

• [BugZero Assignee] Create a GH issue for creating/updating the regression test once above steps have been agreed upon.

  Link to issue:

Regression Test Proposal

Precondition:

• Have an account with workspace and workflows enabled.

Test:

1. Navigate to the Add Bank Account modal in Workspace settings.
2. Start adding a Verifying bank account and proceed to the Company Info page.
3. Activate the compose box on the Company Info page.
4. Tap the Back Arrow button.
5. Verify that the confirmation button does not jump when returning to the previous page.

Do we agree 👍 or 👎

[mananjadhav]

@CortneyOfstad This is ready for payout, can you please post the payment summary. Please note this one had a regression, so the payout would be 125$

[CortneyOfstad]

Payment Summary

@huult – paid $250 via Upwork
@mananjadhav — to be paid $250 via NewDot

Regression Test

https://github.com/Expensify/Expensify/issues/469288