[HOLD for payment 2024-12-30] [$250] Android - Create room - Blank area displayed below list of workspaces

[lanitochka17]

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.68.7
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Y
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:

1. Open the app and log with an account that has more than 7 workspaces
2. Tap FAB > Start chat > Room
3. Wait until the keyboard opens up
4. Select the Workspace row

Expected Result:

The list of workspaces is fully visible

Actual Result:

Only 7 workspaces are shown, and there is a blank area below them

Workaround:

Unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

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

Screenshots/Videos

Add any screenshot/video evidence

Bug6680231_1732907486258.video_2024-11-29_14-07-59.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021863558592409171150
• Upwork Job ID: 1863558592409171150
• Last Price Increase: 2024-12-09
• Automatic offers:
• huult | Contributor | 105279933

Issue Owner

Current Issue Owner: @JmillsExpensify / @sonialiap

[melvin-bot]

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

[huult]

Edited by proposal-police: This proposal was edited at 2024-11-30 07:03:40 UTC.

Proposal

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

Blank area displayed below list of workspaces

What is the root cause of that problem?

We open the workspace to select a workspace, but the keyboard remains open

App/src/pages/workspace/WorkspaceNewRoomPage.tsx

Line 295 in a543d86

<InputWrapper

App/src/components/ValuePicker/index.tsx

Line 17 in bd6595f

setIsPickerVisible(true);

and in ScreenWrapper have KeyboardAvoidingView to adjust its height, position, or bottom padding based on the keyboard height to remain visible while the virtual keyboard is displayed.

App/src/components/ValuePicker/ValueSelectorModal.tsx

Line 28 in 9671e6c

<ScreenWrapper

We opened the workspace to select, but KeyboardAvoidingView still detects the keyboard as open and adjusts the bottom padding, causing a blank space to appear.

That's why we don't encounter this issue when the keyboard is not open.

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

we should dismiss keyboard before select workspace modal show and follow this comment

App/src/components/ValuePicker/index.tsx

Line 16 in bd6595f

const showPickerModal = () => {

    const showPickerModal = () => {

+        KeyboardUtils.dismiss().then(() => {
            setIsPickerVisible(true);
+        });
    };

Note: We are able to reuse this solution for similar cases

POC

Screen.Recording.2024-11-30.at.13.58.50.mp4

What alternative solutions did you explore? (Optional)

To resolve this issue, we should disable KeyboardAvoidingView to prevent it from adjusting the bottom padding. Something like that:

App/src/components/ValuePicker/ValueSelectorModal.tsx

Line 28 in 9671e6c

<ScreenWrapper

            <ScreenWrapper
                style={styles.pb0}
                includePaddingTop={false}
                includeSafeAreaPaddingBottom={false}
                testID={ValueSelectorModal.displayName}
+                shouldEnableKeyboardAvoidingView={false}
            >

[melvin-bot]

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

[melvin-bot]

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

[huult]

Proposal updated

• Updated the alternative solutions