[HOLD for payment 2024-06-20] [HOLD for payment 2024-06-18] [$250] Android - Split - Keyboard opens and closes when tapping on split input of the last user

[izarutskaya]

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.77-0
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/tests/view/4585180
Logs: https://stackoverflow.com/c/expensify/questions/4856
Issue reported by: Applause-internal team

Action Performed:

Precondition:

• Samsung keyboard is used.

1. Launch New Expensify app.
2. Go to FAB > Split expense > Manual.
3. Enter amount > Next.
4. Select many participants so that the confirmation page is scrollable.
5. On confirmation page, tap on the split amount input next to the last user in the list.

Expected Result:

Keyboard will open without issue.

Actual Result:

Keyboard opens and closes when tapping on the split amount input of the last user in the list.

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

Bug6495693_1717034810234.Screen_Recording_20240530_100013_New_Expensify.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01fd23cc3f2ade28b9
• Upwork Job ID: 1796562307300827136
• Last Price Increase: 2024-05-31
• Automatic offers:
• dukenv0307 | Reviewer | 102596353
• tienifr | Contributor | 102596356

Issue Owner

Current Issue Owner: @isabelastisser / @isabelastisser

Issue Owner

Current Issue Owner: @puneetlath / @isabelastisser

[melvin-bot]

Triggered auto assignment to @isabelastisser (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.

[izarutskaya]

We think this issue might be related to the #vip-split.

[melvin-bot]

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

[melvin-bot]

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

[goldenbear101]

Hello,
I believe the problem described involves the Samsung keyboard on Android devices where it opens and closes when tapping on the split amount input of the last user in a scrollable list in the Expensify app. This issue is reproducible in both staging and production environments.

[melvin-bot]

📣 @goldenbear101! 📣
Hey, it seems we don’t have your contributor details yet! You'll only have to do this once, and this is how we'll hire you on Upwork.
Please follow these steps:

1. Make sure you've read and understood the contributing guidelines.
2. Get the email address used to login to your Expensify account. If you don't already have an Expensify account, create one here. If you have multiple accounts (e.g. one for testing), please use your main account email.
3. Get the link to your Upwork profile. It's necessary because we only pay via Upwork. You can access it by logging in, and then clicking on your name. It'll look like this. If you don't already have an account, sign up for one here.
4. Copy the format below and paste it in a comment on this issue. Replace the placeholder text with your actual details.
   
   Format:

Contributor details
Your Expensify account email: <REPLACE EMAIL HERE>
Upwork Profile Link: <REPLACE LINK HERE>

[goldenbear101]

let me take the job up, if you may

[goldenbear101]

Contributor details
Your Expensify account email: irvinwoluchem@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/~017e81b8541352d771

[melvin-bot]

⚠️ Invalid email. Please make sure to create an Expensify account with this email first here.

[goldenbear101]

Contributor details
Your Expensify account email: [irvinwoluchem@gmail.com]
Upwork Profile Link: https://www.upwork.com/freelancers/~017e81b8541352d771

[melvin-bot]

⚠️ Missing/invalid email or upwork profile link. Please make sure you add both your Expensify email and Upwork profile link in the format specified.

[goldenbear101]

Contributor details
Your Expensify account email: irvinwoluchem@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/~017e81b8541352d771

[melvin-bot]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[melvin-bot]

@isabelastisser, @dukenv0307 Whoops! This issue is 2 days overdue. Let's get this updated quick!

[goldenbear101]

Proposal
The issue is that when using the Samsung keyboard on the Android version of the New Expensify app, the keyboard opens and closes immediately when tapping on the split amount input field next to the last user in the list on the confirmation page.

Root Cause
The root cause is likely due to a conflict between the UI elements and the keyboard behavior when the screen is scrollable. Specifically, tapping on the input field near the bottom of a scrollable view might cause the view to adjust, resulting in the keyboard closing unexpectedly.

Proposed Changes
To solve the problem, the following changes are recommended:

1. Adjust Viewport and Scroll Behavior
   Ensure that the viewport and scroll behavior are properly adjusted when the input field is focused.

// Adjust the viewport and scroll behavior
function handleInputFocus(event) {
    const inputField = event.target;
    // Scroll the view to ensure the input field is fully visible
    scrollView.scrollTo({
        y: inputField.offsetTop - keyboardHeight,
        animated: true,
    });
    // Ensure the keyboard remains open
    inputField.focus();
}

2. Prevent Keyboard from Closing
   Implement logic to prevent the keyboard from closing when the input field is focused.

// Prevent the keyboard from closing
inputField.addEventListener('focus', handleInputFocus);

3. Update the Confirmation Page Layout
   Ensure that the layout of the confirmation page is properly adjusted to accommodate the keyboard when it is opened.

// Adjust the layout of the confirmation page
<ScrollView contentContainerStyle={styles.scrollViewContent}>
    {participants.map((participant, index) => (
        <View key={participant.id} style={styles.participantRow}>
            <TextInput
                style={styles.splitInput}
                onFocus={handleInputFocus}
                placeholder="Enter amount"
                value={participant.amount}
                onChangeText={(text) => updateParticipantAmount(index, text)}
            />
        </View>
    ))}
</ScrollView>

4. Test with Samsung Keyboard
   Ensure that the changes are tested specifically with the Samsung keyboard to verify that the issue is resolved.

// Test with Samsung keyboard
function testWithSamsungKeyboard() {
    // Simulate the conditions of the issue
    simulateKeyboardOpen();
    // Verify that the keyboard remains open
    assert(keyboardIsOpen());
}

Expected Result
When tapping on the split amount input field next to the last user in the list, the keyboard should open without any issues and remain open, allowing the user to input the split amount.

By implementing these changes, the user experience on the Android version of the New Expensify app will be improved, ensuring that the keyboard behavior is consistent and reliable when entering split amounts for the last user in a scrollable list.

[isabelastisser]

@dukenv0307, can you please review the proposal above? Thanks!

[dukenv0307]

@goldenbear101 Thanks for your proposal, but I don't think it's the correct RCA. In report screen, it's scrollable view and the composer place at the bottom, but the keyboard is still opened

[tienifr]

Proposal

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

Keyboard opens and closes when tapping on the split amount input of the last user in the list.

What is the root cause of that problem?

We're render Participant list using RNSectionList and we enable removeClippedSubviews for android

App/src/components/SectionList/index.android.tsx

Line 14 in 24c5fe2

removeClippedSubviews

In the documentation of RN, they said that

Note: may have bugs (missing content) in some circumstances - use at your own risk.

Ref: https://reactnative.dev/docs/sectionlist#removeclippedsubviews

And I also test the simple SectionList of text input on sandbox, I still faced with that bug

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

To avoid that bug we can create the flag to disable removeClippedSubviews in this case. We can do that since the list of participant in split confirmation page is not large and we also do it in some places like here and here

What alternative solutions did you explore? (Optional)

NA

Result

Screen.Recording.2024-06-04.at.11.49.58.mov

[isabelastisser]

@dukenv0307, please review the new proposal above. Thanks!

[dukenv0307]

@tienifr's proposal looks good to me and tests well

🎀👀🎀 C+ reviewed

[melvin-bot]

Triggered auto assignment to @puneetlath, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

[melvin-bot]

📣 @dukenv0307 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

[melvin-bot]

📣 @tienifr 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

[tienifr]

@dukenv0307 PR #43091 is ready

[isabelastisser]

@dukenv0307, can you please share an update? Thanks!

[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 1.4.81-11 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• fix Keyboard opens and closes when tapping on split input #43091

If no regressions arise, payment will be issued on 2024-06-18. 🎊

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

• @tienifr requires payment automatic offer (Contributor)
• @dukenv0307 requires payment automatic offer (Reviewer)

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@dukenv0307] The PR that introduced the bug has been identified. Link to the PR:
• [@dukenv0307] 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. Link to comment:
• [@dukenv0307] A discussion in #expensify-bugs 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:
• [@dukenv0307] Determine if we should create a regression test for this bug.
• [@dukenv0307] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@puneetlath / @isabelastisser] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[dukenv0307]

BugZero Checklist:

• The PR that introduced the bug has been identified. Link to the PR: N/A
• 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. Link to comment: N/A
• A discussion in #expensify-bugs 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: N/A
• Determine if we should create a regression test for this bug. N/A
• If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again. N/A

[melvin-bot]

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

• fix Keyboard opens and closes when tapping on split input #43091

If no regressions arise, payment will be issued on 2024-06-20. 🎊

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

• @tienifr requires payment automatic offer (Contributor)
• @dukenv0307 requires payment automatic offer (Reviewer)

[melvin-bot]

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

• [@dukenv0307] The PR that introduced the bug has been identified. Link to the PR:
• [@dukenv0307] 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. Link to comment:
• [@dukenv0307] A discussion in #expensify-bugs 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:
• [@dukenv0307] Determine if we should create a regression test for this bug.
• [@dukenv0307] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
• [@isabelastisser] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

[isabelastisser]

Payment summary:

@tienifr requires payment automatic offer (Contributor) $250
@dukenv0307 requires payment automatic offer (Reviewer) $250

[isabelastisser]

The payments were processed in Upwork. All set.