[HOLD for payment 2025-01-02] [$250] Android - Workspace - White space below next button & keypad not closed on tapping outside

[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: V9. 0.74-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught on HybridApp, is this reproducible on New Expensify Standalone?: Yes, reproducible on both
Issue reported by: Applause Internal Team

Action Performed:

Pre- condition: Have control workspace with 2 members invited, enabled workflow and add approval

1. Launch app in both mweb and android
2. Go to workspace settings - workflow
3. Tap add approval workflow
4. Note the white space between next button and keypad in mweb and android
5. Tap outside on top
6. Note keypad behavior on mweb and android

Expected Result:

In add approval workflow page, the white space between next button and keypad must be consistent, similarly on tapping outside keypad closing behavior too must be consistent.

Actual Result:

In add approval workflow page, the white space between next button and keypad in less in mweb and more in android. After tapping outside, keypad closed in mweb and remain opened in android.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6690627_1733897506218.as.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021867598579287232853
• Upwork Job ID: 1867598579287232853
• Last Price Increase: 2024-12-13

Issue Owner

Current Issue Owner: @Christinadobrzyn

[melvin-bot]

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

[bernhardoj]

Proposal

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

There are extra spaces between the button and keyboard on the workflow page.

What is the root cause of that problem?

On the Expenses From page, we disable the padding bottom from ScreenWrapper.

App/src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsExpensesFromPage.tsx

Lines 205 to 207 in 8749259

	<ScreenWrapper
	includeSafeAreaPaddingBottom={false}
	testID={WorkspaceWorkflowsApprovalsExpensesFromPage.displayName}

The padding bottom is added from the SelectionList using useStyledSafeAreaInsets.

App/src/components/SelectionList/BaseSelectionList.tsx

Lines 770 to 774 in 8749259

	const {safeAreaPaddingBottomStyle} = useStyledSafeAreaInsets();
	// TODO: test _every_ component that uses SelectionList
	return (
	<View style={[styles.flex1, (!isKeyboardShown || !!footerContent) && includeSafeAreaPaddingBottom && safeAreaPaddingBottomStyle, containerStyle]}>

Also, the button is wrapped with FixedFooter which has its own padding bottom already.

App/src/components/SelectionList/BaseSelectionList.tsx

Lines 839 to 841 in 8749259

	{showConfirmButton && (
	<FixedFooter style={[styles.mtAuto]}>
	<Button

This looks fine when the keyboard isn't visible because the padding fills the device navigation bar space, but when the keyboard shows, it looks like too much space. It doesn't happen on another page that uses SelectionList too because useStyledSafeAreaInsets returns 0 padding if it's already applied by the ScreenWrapper.

Why it's not a problem if the padding bottom is added from the ScreenWrapper? It's because the padding bottom is applied to the View that wraps the KeyboardAvoidingView.

App/src/components/ScreenWrapper.tsx

Lines 278 to 288 in 97d5921

	<View
	fsClass="fs-unmask"
	style={[styles.flex1, paddingStyle, style]}
	// eslint-disable-next-line react/jsx-props-no-spreading, react-compiler/react-compiler
	{...keyboardDismissPanResponder.panHandlers}
	>
	<KeyboardAvoidingView
	style={[styles.w100, styles.h100, {maxHeight}, isAvoidingViewportScroll ? [styles.overflowAuto, styles.overscrollBehaviorContain] : {}]}
	behavior={keyboardAvoidingViewBehavior}
	enabled={shouldEnableKeyboardAvoidingView}
	>

But the padding in SelectionList is added as the children of the KeyboardAvoidingView.

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

Enable the padding bottom from the ScreenWrapper for the ExpensesFrom page.

App/src/pages/workspace/workflows/approvals/WorkspaceWorkflowsApprovalsExpensesFromPage.tsx

Lines 205 to 207 in 8749259

	<ScreenWrapper
	includeSafeAreaPaddingBottom={false}
	testID={WorkspaceWorkflowsApprovalsExpensesFromPage.displayName}

(we can check for other pages that uses BaseSelectionList too, like in Approver page for example)

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

N/A

[Christinadobrzyn]

Hum this is a really minor change. I'm not sure if this is something that is very important to update at this time. @bernhardoj do you this is important for any reason?

[Christinadobrzyn]

Just a heads up that I'm going to be ooo Dec 12 - 13th. Back on Monday 16th. I'm not going to assign this to a BZ teammate but if anything is urgent, please reach out to the team for a volunteer.

[bernhardoj]

It's not something critical, but seeing those extra spaces is very unpleasant. (this happens on some pages too)

[melvin-bot]

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

[melvin-bot]

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

[Christinadobrzyn]

Okay, I think if you think this should be resolved, we'll move it forward. Adding external for a review of #53910 (comment).

[c3024]

Is this a problem for all pages with ScreenWrapper with includeSafeAreaPaddingBottom false and with BaseSelectionList with search bar enabled as child?

[bernhardoj]

Yes, except if the list doesn't have a footer. For example, it happens on the Approver page too (the Approver search input only shows if there is >8 item)

[c3024]

@bernhardoj 's proposal here LGTM!

🎀 👀 🎀 C+ Reviewed

[melvin-bot]

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

[bernhardoj]

PR is ready

cc: @c3024

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

• Fix extra spaces below list footer #54255

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

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

• @bernhardoj requires payment through NewDot Manual Requests
• @c3024 requires payment through NewDot Manual Requests

[melvin-bot]

@c3024 @Christinadobrzyn @c3024 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]

[melvin-bot]

Payment Summary

Upwork Job

• Contributor: @bernhardoj owed $250 via NewDot
• Reviewer: @c3024 owed $250 via NewDot

BugZero Checklist (@Christinadobrzyn)

• I have verified the correct assignees and roles are listed above and updated the neccesary manual offers
• I have verified that there are no duplicate or incorrect contracts on Upwork for this job (https://www.upwork.com/ab/applicants/1867598579287232853/hired)
• I have paid out the Upwork contracts or cancelled the ones that are incorrect
• I have verified the payment summary above is correct

[Christinadobrzyn]

Payment summary here - #53910 (comment)

@c3024 do we need a regression test for this?

[Christinadobrzyn]

DMd @c3024 to see if we need a regression test

[c3024]

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.

  Link to comment: https://github.com/Expensify/App/pull/37391/files#r1904879930

• [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: This is a specific edge case and it does not need a discussion.

• [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: https://github.com/Expensify/Expensify/issues/458019

Regression Test Proposal

Precondition:

Have a "Control" workspace with

1. 2 members invited.
2. "Workflows" enabled.
3. "Add approvals" enabled in "Workflows".

Test:

1. Go to Workspace Settings > Workflows.
2. Press "Add approval workflow".
3. On mobile, make sure the keyboard is shown, if not, press on the input.
4. Verify there are no extra spaces below the button

Do we agree 👍 or 👎

[bernhardoj]

Requested in ND.

[Christinadobrzyn]

Awesome! Thank you @bernhardoj and @c3024! Closing this out as complete.

[JmillsExpensify]

$250 approved for @bernhardoj

[JmillsExpensify]

$250 approved for @c3024