[Due for payment 2025-08-15] [$250] mWeb - Report fields - Unable to scroll down while tapping on report field

[vincdargento]

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.1.46-4
Reproducible in staging?: Yes
Reproducible in production?: Yes
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): applausetester+160510kh@applause.expensifail.com
Issue reported by: Applause Internal Team
Device used: Samsung Galaxy Z Fold 4 / Android 14
App Component: Workspace Settings

Action Performed:

Precondition:

• Report fields feature is enabled in workspace settings > Reports.
• Add many report fields until the page is scrollable.

1. Go to staging.new.expensify.com
2. Go to Workspaces settings > Reports.
3. Tap on any report field and start scrolling down.

Expected Result:

User is able to scroll down while tapping on report field.

Actual Result:

User is unable to scroll down while tapping on report field.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

bug.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021924904245994646286
• Upwork Job ID: 1924904245994646286
• Last Price Increase: 2025-07-22
• Automatic offers:
• linhvovan29546 | Contributor | 108165165

Issue Owner

Current Issue Owner: @alitoshmatov

Issue Owner

Current Issue Owner: @alitoshmatov

[melvin-bot]

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

[nkdengineer]

Proposal

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

User is unable to scroll down while tapping on report field.

What is the root cause of that problem?

We disable scroll in FlatList here

App/src/pages/workspace/reportFields/WorkspaceReportFieldsPage.tsx

Line 277 in 6d25d42

scrollEnabled={false}

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

We should remove the prop here and use default value true

App/src/pages/workspace/reportFields/WorkspaceReportFieldsPage.tsx

Line 277 in 6d25d42

scrollEnabled={false}

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

None, UI Bug

What alternative solutions did you explore? (Optional)

NA

Reminder: Please use plain English, be brief and avoid jargon. Feel free to use images, charts or pseudo-code if necessary. Do not post large multi-line diffs or write walls of text. Do not create PRs unless you have been hired for this job.

[Krishna2323]

Proposal

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

mWeb - Report fields - Unable to scroll down while tapping on report field

What is the root cause of that problem?

• scrollEnabled is always set to false in WorkspaceReportFieldsPage.

App/src/pages/workspace/reportFields/WorkspaceReportFieldsPage.tsx

Lines 273 to 278 in 32d67b3

	<FlatList
	data={reportFieldsSections}
	renderItem={renderItem}
	style={[shouldUseNarrowLayout ? styles.mhn5 : styles.mhn8, styles.mt6]}
	scrollEnabled={false}
	/>

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

• We should use the useScrollEnabled hook by declaring const scrollEnabled = useScrollEnabled(); and passing scrollEnabled={scrollEnabled} to the FlatList component.
• The useScrollEnabled hook only enables scrolling when the screen is focused. This helps avoid issues like these.

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

N/A -- UI Issue

What alternative solutions did you explore? (Optional)

N/A

Result

[linhvovan29546]

🚨 Edited by proposal-police: This proposal was edited at 2025-05-17 01:04:53 UTC.

Proposal

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

mWeb - Report fields - Unable to scroll down while tapping on report field

What is the root cause of that problem?

We’re currently nesting a FlatList inside a ScrollView

App/src/pages/workspace/reportFields/WorkspaceReportFieldsPage.tsx

Line 189 in 32d67b3

<ScrollView contentContainerStyle={[styles.flexGrow1, styles.mt3, shouldUseNarrowLayout ? styles.workspaceSectionMobile : styles.workspaceSection]}>

App/src/pages/workspace/reportFields/WorkspaceReportFieldsPage.tsx

Line 273 in 32d67b3

<FlatList

So this throw warning "VirtualizedLists should never be nested inside plain ScrollViews with the same orientation."
To suppress the warning, we disabled scrolling on the FlatList, but this leads to other issues—particularly on mWeb as mentioned in the original post (OP).

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

We should avoid nesting a FlatList within a ScrollView. This is not a recommended pattern and causes unexpected behavior. Instead, we should replace the FlatList with a FlashList

App/src/pages/workspace/reportFields/WorkspaceReportFieldsPage.tsx

Line 273 in 32d67b3

<FlatList

                                        <View style={[shouldUseNarrowLayout ? styles.mhn5 : styles.mhn8, styles.mt6]}>
                                            <FlashList
                                                data={reportFieldsSections}
                                                renderItem={renderItem}
                                                estimatedItemSize={variables.optionRowHeight}
                                            />
                                            </View>

Then I think we should update the documentation to include instructions on how to use FlashList inside a ScrollView as well.

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

N/A UI bug

What alternative solutions did you explore? (Optional)

1. We can update the ScrollView to Flatlist similar my primary solution above

Example

 <FlatList
                        data={[
                            {
                                title: 'Report Title',
                                data: [], // Empty for header-only section
                                type: 'reportTitle',
                            },
                            {
                                title: 'Report Fields',
                                data: policy?.areReportFieldsEnabled ? reportFieldsSections : [],
                                type: 'reportFields',
                            },
                        ]}
                        renderItem={({item}) => {
                            if (item.type === 'reportTitle') {
                                return (
                                    <Section
                                        isCentralPane
                                        title={translate('workspace.common.reportTitle')}
                                        renderSubtitle={() => (
                                            <Text style={[[styles.textLabelSupportingEmptyValue, styles.lh20, styles.mt1]]}>
                                                {translate('workspace.rules.expenseReportRules.customReportNamesSubtitle')}
                                                <TextLink
                                                    style={[styles.link]}
                                                    href={CONST.CUSTOM_REPORT_NAME_HELP_URL}
                                                >
                                                    {translate('workspace.rules.expenseReportRules.customNameDescriptionLink')}
                                                </TextLink>
                                                .
                                            </Text>
                                        )}
                                        containerStyles={shouldUseNarrowLayout ? styles.p5 : styles.p8}
                                        titleStyles={[styles.textHeadline, styles.cardSectionTitle, styles.accountSettingsSectionTitle, styles.mb1]}
                                    >
                                        <OfflineWithFeedback pendingAction={reportTitlePendingFields.defaultValue}>
                                            <MenuItemWithTopDescription
                                                description={translate('workspace.rules.expenseReportRules.customNameTitle')}
                                                title={policy?.fieldList?.[CONST.POLICY.FIELDS.FIELD_LIST_TITLE].defaultValue}
                                                shouldShowRightIcon
                                                style={[styles.sectionMenuItemTopDescription, styles.mt6, styles.mbn3]}
                                                onPress={() => Navigation.navigate(ROUTES.RULES_CUSTOM_NAME.getRoute(policyID))}
                                            />
                                        </OfflineWithFeedback>
                                        <ToggleSettingOptionRow
                                            pendingAction={reportTitlePendingFields.deletable}
                                            title={translate('workspace.rules.expenseReportRules.preventMembersFromChangingCustomNamesTitle')}
                                            switchAccessibilityLabel={translate('workspace.rules.expenseReportRules.preventMembersFromChangingCustomNamesTitle')}
                                            wrapperStyle={[styles.sectionMenuItemTopDescription, styles.mt6]}
                                            titleStyle={styles.pv2}
                                            isActive={!policy?.fieldList?.[CONST.POLICY.FIELDS.FIELD_LIST_TITLE].deletable}
                                            onToggle={(isEnabled) => {
                                                if (isEnabled && !isControlPolicy(policy)) {
                                                    Navigation.navigate(
                                                        ROUTES.WORKSPACE_UPGRADE.getRoute(
                                                            policyID,
                                                            CONST.UPGRADE_FEATURE_INTRO_MAPPING.policyPreventMemberChangingTitle.alias,
                                                            ROUTES.WORKSPACE_REPORT_FIELDS.getRoute(policyID),
                                                        ),
                                                    );
                                                    return;
                                                }

                                                setPolicyPreventMemberCreatedTitle(policyID, isEnabled);
                                            }}
                                        />
                                    </Section>
                                );
                            }
                            if (item.type === 'reportFields') {
                                const {data} = item;
                                return (
                                    <Section
                                        isCentralPane
                                        containerStyles={shouldUseNarrowLayout ? styles.p5 : styles.p8}
                                    >
                                        <ToggleSettingOptionRow
                                            pendingAction={policy?.pendingFields?.areReportFieldsEnabled}
                                            title={translate('workspace.common.reportFields')}
                                            switchAccessibilityLabel={translate('workspace.common.reportFields')}
                                            subtitle={getHeaderText()}
                                            titleStyle={[styles.textHeadline, styles.cardSectionTitle, styles.accountSettingsSectionTitle, styles.mb1]}
                                            isActive={!!policy?.areReportFieldsEnabled}
                                            onToggle={(isEnabled) => {
                                                if (!isEnabled) {
                                                    setIsReportFieldsWarningModalOpen(true);
                                                    return;
                                                }
                                                if (!isControlPolicy(policy)) {
                                                    Navigation.navigate(
                                                        ROUTES.WORKSPACE_UPGRADE.getRoute(
                                                            policyID,
                                                            CONST.UPGRADE_FEATURE_INTRO_MAPPING.reportFields.alias,
                                                            ROUTES.WORKSPACE_REPORT_FIELDS.getRoute(policyID),
                                                        ),
                                                    );
                                                    return;
                                                }
                                                enablePolicyReportFields(policyID, isEnabled);
                                            }}
                                            disabled={hasAccountingConnection}
                                            disabledAction={onDisabledOrganizeSwitchPress}
                                            subMenuItems={
                                                !!policy?.areReportFieldsEnabled && (
                                                    <>
                                                        <FlatList
                                                            data={data}
                                                            renderItem={renderItem}
                                                            style={[shouldUseNarrowLayout ? styles.mhn5 : styles.mhn8, styles.mt6]}
                                                        />
                                                        {!hasReportAccountingConnections && (
                                                            <MenuItem
                                                                onPress={() => Navigation.navigate(ROUTES.WORKSPACE_CREATE_REPORT_FIELD.getRoute(policyID))}
                                                                title={translate('workspace.reportFields.addField')}
                                                                icon={Plus}
                                                                style={[styles.sectionMenuItemTopDescription]}
                                                            />
                                                        )}
                                                    </>
                                                )
                                            }
                                        />
                                    </Section>
                                );
                            }
                            return null;
                        }}
                        contentContainerStyle={[styles.flexGrow1, styles.mt3, shouldUseNarrowLayout ? styles.workspaceSectionMobile : styles.workspaceSection]}
                    />

2. We can simplify the implementation by replacing the FlatList with a basic reportFieldsSections.map() to render the data(This may cause performance issues with large lists)

[melvin-bot]

@isabelastisser Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[melvin-bot]

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

[melvin-bot]

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