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

[IuliiaHerets]

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: 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:

1. Submit a track expense in the self DM
2. On the actionable whisper options of a track expense, click on Share it with your accountant
3. In the Share page, enter a few characters to trigger the search
4. Delete all characters
5. 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:

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

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]

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]

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

[melvin-bot]

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

[melvin-bot]

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

[mkzie2]

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]

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