[HOLD for payment 2025-01-02] [$250] Android - Track Expenses-The "New workspace" button is displayed behind the keyboard #53689

IuliiaHerets · 2024-12-06T09:55:25Z

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: 9.0.72-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Yes
If this was caught during regression testing, add the test name, ID and link from TestRail: https://expensify.testrail.io/index.php?/cases/view/2990404
Email or phone of affected tester (no customers): N/A
Issue reported by: Applause Internal Team

Action Performed:

Setup:
User logged in with an expensifail account.
The user has at least one workspace and needs to delete it just before performing the steps.

Steps:

Submit a track expense in the self DM
On the actionable whisper options of a track expense, click on Share it with your accountant
In the Share page, enter a few characters to trigger the search
Delete all characters
Hide the keyboard

Expected Result:

The "New workspace" button should be displayed above the keyboard all of the time.

Actual Result:

The New Workspace button appears behind and is sometimes cut off by the keyboard.

Workaround:

Unknown

Platforms:

Screenshots/Videos

Bug6685837_1733445074050.button_behind_keyboard.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~021866934464307418827
Upwork Job ID: 1866934464307418827
Last Price Increase: 2024-12-11
Automatic offers:

mkzie2 | Contributor | 105338525

Issue Owner

Current Issue Owner: @anmurali

melvin-bot · 2024-12-06T09:55:34Z

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

melvin-bot · 2024-12-10T09:31:51Z

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

melvin-bot · 2024-12-11T19:53:58Z

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

melvin-bot · 2024-12-11T19:54:04Z

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

mkzie2 · 2024-12-11T20:40:16Z

Edited by proposal-police: This proposal was edited at 2024-12-11 20:41:25 UTC.

Proposal

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

The New Workspace button appears behind and is sometimes cut off by the keyboard.

What is the root cause of that problem?

The empty section has minHeight65 style.

App/src/components/EmptySelectionListContent.tsx

Lines 42 to 46 in 05b4e8a

    
           <View style={[styles.flex1, styles.overflowHidden, styles.minHeight65]}> 
        
               <BlockingView 
        
                   icon={Illustrations.ToddWithPhones} 
        
                   iconWidth={variables.emptySelectionListIconWidth} 
        
                   iconHeight={variables.emptySelectionListIconHeight}

.

When the keyboard is shown, because the empty section cannot scroll, the new workspace button is down behind the keyboard

App/src/components/SelectionList/BaseSelectionList.tsx

Lines 784 to 786 in 05b4e8a

    
           {flattenedSections.allOptions.length === 0 && (showLoadingPlaceholder || shouldShowListEmptyContent) ? ( 
        
               renderListEmptyContent() 
        
           ) : (

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

Add a ScrollView to renderListEmptyContent

<ScrollView>
    {renderListEmptyContent()}
</ScrollView>

App/src/components/SelectionList/BaseSelectionList.tsx

Lines 784 to 786 in 05b4e8a

    
           {flattenedSections.allOptions.length === 0 && (showLoadingPlaceholder || shouldShowListEmptyContent) ? ( 
        
               renderListEmptyContent() 
        
           ) : (

Optional: In this case, we can also add the footerContent and confirm button to this scroll view

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

UI issue no need the test

What alternative solutions did you explore? (Optional)

We need to adjust the EmptySelectionListContent to reduce the height of this component. For example, we can introduce props to customize the icon size, text size, and wrap view style here (for each or all platforms) so as not to apply the minHeight65 style when we want. Here is an example of when we reduce the icon size. We need to confirm more information with the design team.

App/src/components/EmptySelectionListContent.tsx

Lines 42 to 46 in 05b4e8a

    
           <View style={[styles.flex1, styles.overflowHidden, styles.minHeight65]}> 
        
               <BlockingView 
        
                   icon={Illustrations.ToddWithPhones} 
        
                   iconWidth={variables.emptySelectionListIconWidth} 
        
                   iconHeight={variables.emptySelectionListIconHeight}

.

Pujan92 · 2024-12-13T12:19:50Z

The minHeight65 root cause in EmptySelectionListContent and adding ScrollView for the emptycontent as mentioned in @mkzie2's proposal looks good to me, I suggest to add ScrollView in EmptySelectionListContent component as a generic solution.

🎀👀🎀 C reviewed

Pujan92 · 2024-12-13T12:20:29Z

🎀👀🎀 C reviewed

melvin-bot · 2024-12-13T12:20:41Z

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

melvin-bot · 2024-12-14T21:03:22Z

📣 @mkzie2 🎉 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 📖

mkzie2 · 2024-12-17T07:29:06Z

@Pujan92 The PR is ready.

mvtglobally · 2024-12-21T02:33:49Z

Issue not reproducible during KI retests. (First week)

melvin-bot · 2024-12-25T18:15:00Z

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

melvin-bot · 2024-12-26T20:33:15Z

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

melvin-bot · 2024-12-26T20:33:22Z

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

Fix: new workspace button is overlapped by keyboard #54231

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

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

@Pujan92 requires payment through NewDot Manual Requests
@mkzie2 requires payment automatic offer (Contributor)

melvin-bot · 2024-12-26T20:33:23Z

@Pujan92 @anmurali @Pujan92 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]

IuliiaHerets added Daily KSv2 Bug Something is broken. Auto assigns a BugZero manager. labels Dec 6, 2024

melvin-bot bot assigned anmurali Dec 6, 2024

melvin-bot bot added the Overdue label Dec 9, 2024

anmurali added the External Added to denote the issue can be worked on by a contributor label Dec 11, 2024

melvin-bot bot changed the title ~~Android - Track Expenses-The "New workspace" button is displayed behind the keyboard~~ [$250] Android - Track Expenses-The "New workspace" button is displayed behind the keyboard Dec 11, 2024

melvin-bot bot added the Help Wanted Apply this label when an issue is open to proposals by contributors label Dec 11, 2024

melvin-bot bot assigned Pujan92 Dec 11, 2024

melvin-bot bot removed the Overdue label Dec 11, 2024

melvin-bot bot assigned youssef-lr Dec 13, 2024

youssef-lr assigned mkzie2 Dec 14, 2024

melvin-bot bot removed the Help Wanted Apply this label when an issue is open to proposals by contributors label Dec 14, 2024

mkzie2 mentioned this issue Dec 17, 2024

Fix: new workspace button is overlapped by keyboard #54231

Merged

50 tasks

melvin-bot bot added Reviewing Has a PR in review Weekly KSv2 and removed Daily KSv2 labels Dec 17, 2024

melvin-bot bot added Weekly KSv2 and removed Weekly KSv2 labels Dec 26, 2024

melvin-bot bot added the Awaiting Payment Auto-added when associated PR is deployed to production label Dec 26, 2024

melvin-bot bot changed the title ~~[$250] Android - Track Expenses-The "New workspace" button is displayed behind the keyboard~~ [HOLD for payment 2025-01-02] [$250] Android - Track Expenses-The "New workspace" button is displayed behind the keyboard Dec 26, 2024

melvin-bot bot removed the Reviewing Has a PR in review label Dec 26, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[HOLD for payment 2025-01-02] [$250] Android - Track Expenses-The "New workspace" button is displayed behind the keyboard #53689

[HOLD for payment 2025-01-02] [$250] Android - Track Expenses-The "New workspace" button is displayed behind the keyboard #53689

IuliiaHerets commented Dec 6, 2024 •

edited by melvin-bot bot

Loading

melvin-bot bot commented Dec 6, 2024

melvin-bot bot commented Dec 10, 2024

melvin-bot bot commented Dec 11, 2024

melvin-bot bot commented Dec 11, 2024

mkzie2 commented Dec 11, 2024 •

edited by github-actions bot

Loading

Pujan92 commented Dec 13, 2024 •

edited

Loading

Pujan92 commented Dec 13, 2024

melvin-bot bot commented Dec 13, 2024

melvin-bot bot commented Dec 14, 2024

mkzie2 commented Dec 17, 2024

mvtglobally commented Dec 21, 2024

melvin-bot bot commented Dec 25, 2024

melvin-bot bot commented Dec 26, 2024

melvin-bot bot commented Dec 26, 2024

melvin-bot bot commented Dec 26, 2024

[HOLD for payment 2025-01-02] [$250] Android - Track Expenses-The "New workspace" button is displayed behind the keyboard #53689

[HOLD for payment 2025-01-02] [$250] Android - Track Expenses-The "New workspace" button is displayed behind the keyboard #53689

Comments

IuliiaHerets commented Dec 6, 2024 • edited by melvin-bot bot Loading

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

melvin-bot bot commented Dec 6, 2024

melvin-bot bot commented Dec 10, 2024

melvin-bot bot commented Dec 11, 2024

melvin-bot bot commented Dec 11, 2024

mkzie2 commented Dec 11, 2024 • edited by github-actions bot Loading

Proposal

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

What is the root cause of that problem?

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

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

What alternative solutions did you explore? (Optional)

Pujan92 commented Dec 13, 2024 • edited Loading

Pujan92 commented Dec 13, 2024

melvin-bot bot commented Dec 13, 2024

melvin-bot bot commented Dec 14, 2024

mkzie2 commented Dec 17, 2024

mvtglobally commented Dec 21, 2024

melvin-bot bot commented Dec 25, 2024

melvin-bot bot commented Dec 26, 2024

melvin-bot bot commented Dec 26, 2024

melvin-bot bot commented Dec 26, 2024

IuliiaHerets commented Dec 6, 2024 •

edited by melvin-bot bot

Loading

mkzie2 commented Dec 11, 2024 •

edited by github-actions bot

Loading

Pujan92 commented Dec 13, 2024 •

edited

Loading