Expenses - Expense details page not scrollable after moving IOU report to workspace

[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: v9.2.92-0
Reproducible in staging?: Yes
Reproducible in production?: Yes
If this was caught during regression testing, add the test name, ID and link from BrowserStack: https://test-management.browserstack.com/projects/2219752/test-runs/TR-2650/folder/13177049/41237817/1103833305
Email or phone of affected tester (no customers): kiatest.80+ck122650@gmail.com
Issue reported by: Applause Internal Team
Bug source: Regression TC Execution
Device used: Windows 11/Chrome, iPhone 16/iOS 18.7.1
App Component: Money Requests

Action Performed:

1. Navigate to staging.new.expensify.com with an account with default currency should be USD
2. Click FAB >> Create Expense
3. Enter amount and click "Next"
4. Enter an email address which has no expensify account yet
5. Submit expense
6. Log in to the other account to which expense was submitted
7. Click on Pay button dropdown in expense preview
8. Select Pay with Business account & start bank account flow
9. Cancel the bank account setup flow
10. Select expense to navigate to expense details page
11. Try scrolling the page & observe page cannot be scrolled (Category, Report & Reimbursable fields seems to be hidden)
12. Go back to Expense preview & navigate back to details page
13. Observe details page is scrollable now

Expected Result:

On step 11 - After moving the IOU report to workspace, the expense details page should be easily scrollable & user able to view all fields (Category, Report & Reimbursable fields)

Actual Result:

On step 11 - Expense details page cannot be scrolled after moving IOU report to workspace.
User has to navigate back to expense preview & back to details page for the page to be easily scrolled & view all fields

Workaround:

Unknown

Platforms:

• Android: App
• Android: mWeb Chrome
• iOS: App
• iOS: mWeb Safari
• iOS: mWeb Chrome
• Windows: Chrome
• MacOS: Chrome / Safari

Screenshots/Videos

Bug7040818_1767411105888.340.mp4

View all open jobs on GitHub

[melvin-bot]

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

[samranahm]

Proposal

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

After moving an IOU report to a workspace (for example, when starting the bank account setup flow and then canceling it), the expense details page becomes unscrollable. Users cannot see all the fields (Category, Report, Reimbursable) unless they navigate back to the expense preview and then return to the details page, which makes it scrollable again.

What is the root cause of that problem?

The MoneyRequestView component uses the moneyRequestView style which includes overflowY: 'auto' (from overflowMoneyRequestView) to make the content scrollable on web. However, this overflow style doesn't include a height property.

App/src/styles/utils/overflowMoneyRequestView/index.ts

Lines 3 to 6 in f7265ef

	const overflowMoneyRequestView: OverflowMoneyRequestViewStyles = {
	overflowX: 'hidden',
	overflowY: 'auto',
	};

When an IOU report is moved to a workspace:

1. The report's policyID changes from undefined to the workspace's policy ID
2. This triggers a re-render of the MoneyRequestView component
3. During this re-render, the component's height collapses to 0 or becomes undefined
4. With overflowY: 'auto' but no defined height, the scrollable container has no height to scroll within
5. The page appears unscrollable because the container has collapsed

Navigating away and back forces a full remount of the component, which re-establishes the proper height and makes scrolling work again.

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

Add height: '100%' to the overflowMoneyRequestView style configuration to ensure the scrollable container always has a defined height.

In overflowMoneyRequestView/index.ts

Change the style to include height:

const overflowMoneyRequestView: OverflowMoneyRequestViewStyles = {
    overflowX: 'hidden',
    overflowY: 'auto',
    height: '100%',
};

here

App/src/styles/utils/overflowMoneyRequestView/index.ts

Lines 3 to 6 in f7265ef

	const overflowMoneyRequestView: OverflowMoneyRequestViewStyles = {
	overflowX: 'hidden',
	overflowY: 'auto',
	};

and update the type definition to include height

type OverflowMoneyRequestViewStyles = Pick<ViewStyle, 'overflowX' | 'overflowY' | 'height'>;

here

App/src/styles/utils/overflowMoneyRequestView/types.ts

Line 3 in f7265ef

type OverflowMoneyRequestViewStyles = Pick<ViewStyle, 'overflowX' | 'overflowY'>;

What alternative solutions did you explore? (Optional)

Add flex: 1 to the moneyRequestView style instead of height: '100%'.

[dmkt9]

@mallenexpensify It seems to have the same root cause as #74125.
We can hold this until PR #78283 is merged.