[Due for payment 2025-06-11] [$250] Company cards - Country list disappear while scrolling

[nlemma]

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.1.49-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: https://expensify.testrail.io/index.php?/cases/view/3605908
Email or phone of affected tester (no customers): -
Issue reported by: Applause Internal Team
Device used: MacOS Big Sur
App Component: Other

Action Performed:

Precondition: expensifail account with workspace. Company cards enabled.

1. Go to WS > Company cards
2. Click Add cards

Expected Result:

Where’s your bank located? tab opened with country list. List is visible while scrolling to user default country.

Actual Result:

Where’s your bank located? tab opened with country list. List is disappeared while scrolling to user default country.

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

Bug6839045_1747905325803.Screen_Recording_2025-05-22_at_12.06.52_PM.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021927397077677279621
• Upwork Job ID: 1927397077677279621
• Last Price Increase: 2025-05-27
• Automatic offers:
• allgandalf | Reviewer | 107476900

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.

[MobileMage]

Proposal

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

When adding a new company card, the country selection list momentarily appears empty or flickers as it auto-scrolls to the user's default country, especially if that country is far down the list.

What is the root cause of that problem?

The issue stems from the SelectionList's virtualization. When rapidly scrolling to a distant item, the component doesn't render items fast enough due to default settings for initial item rendering (initialNumToRender) and the render window size (windowSize).

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

Adjust the props of the SelectionList in src/pages/workspace/companyCards/addNew/SelectCountryStep.tsx:

1. Set initialNumToRender to 30.
2. Set windowSize to 41.
   These changes will render more items initially and maintain a larger render window, improving perceived performance during scrolling.

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

Manual testing should verify that the country list remains visible and scrolls smoothly without flickering when navigating to the "Where’s your bank located?" screen, particularly when the default country is far down the list (e.g., United States) and also when it's near the top.

What alternative solutions did you explore? (Optional)

N/A

[nabi-ebrahimi]

Proposal

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

Company cards - Country list disappear while scrolling

What is the root cause of that problem?

We are showing a long list of countries, the section list shows blank spaces while fast scrolling.

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

We need to set these values to prevent blank spaces while scrolling. We should pass these props to BaseSelectionList component and then to SectionList

    initialNumToRender={100}
                        maxToRenderPerBatch={50}
                        windowSize={50}

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

none

What alternative solutions did you explore? (Optional)

We can also set disableVirtualization to the Selection list.

[bernhardoj]

Proposal

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

Country list disappears while being scrolled when open first time.

What is the root cause of that problem?

It's a known thing that FlatList won't render all the item, so we will see some blank spaces if we scroll to fast. I think the real problem here is that the list is scrolled on initial mounting. If we see this, we already pass animated as false when scrolling for the first render to scroll to the initial selected item.

App/src/components/SelectionList/BaseSelectionList.tsx

Lines 681 to 694 in 409e68e

	const scrollToFocusedIndexOnFirstRender = useCallback(
	(nativeEvent: LayoutChangeEvent) => {
	if (shouldUseDynamicMaxToRenderPerBatch) {
	const listHeight = nativeEvent.nativeEvent.layout.height;
	const itemHeight = nativeEvent.nativeEvent.layout.y;
	setMaxToRenderPerBatch((Math.ceil(listHeight / itemHeight) || 0) + CONST.MAX_TO_RENDER_PER_BATCH.DEFAULT);
	}
	if (!isInitialSectionListRender) {
	return;
	}
	if (shouldScrollToFocusedIndex) {
	scrollToIndex(focusedIndex, false);
	}

However, as can seen on the video, it's still scrolled. It's because the focus index changes here.

App/src/components/SelectionList/BaseSelectionList.tsx

Lines 362 to 370 in 409e68e

	onFocusedIndexChange: (index: number) => {
	const focusedItem = flattenedSections.allOptions.at(index);
	if (focusedItem) {
	onArrowFocus(focusedItem);
	}
	if (shouldScrollToFocusedIndex) {
	(shouldDebounceScrolling ? debouncedScrollToIndex : scrollToIndex)(index, true);
	}
	},

It's because the initial value is initially empty.

App/src/pages/workspace/companyCards/addNew/SelectCountryStep.tsx

Line 134 in 409e68e

initiallyFocusedOptionKey={currentCountry}

and then updated later by useEffect.

App/src/pages/workspace/companyCards/addNew/SelectCountryStep.tsx

Lines 61 to 78 in 409e68e

	useEffect(() => {
	if (addNewCard?.data?.selectedCountry) {
	setCurrentCountry(addNewCard.data.selectedCountry);
	return;
	}
	const selectedCurrency = policy?.outputCurrency ? currencyList?.[policy.outputCurrency] : null;
	const countries = selectedCurrency?.countries;
	if (policy?.outputCurrency === CONST.CURRENCY.EUR && countryByIp && countries?.includes(countryByIp)) {
	setCurrentCountry(countryByIp);
	return;
	}
	const country = countries?.[0];
	if (country) {
	setCurrentCountry(country);
	}
	}, [addNewCard?.data.selectedCountry, countryByIp, currencyList, policy?.outputCurrency]);

App/src/pages/workspace/companyCards/addNew/SelectCountryStep.tsx

Line 40 in 409e68e

const [currentCountry, setCurrentCountry] = useState<string | undefined>('');

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

We should assign an initial value directly to the state by moving the logic from useEffect to a function.

const getCountry = useCallback(() => {
    if (addNewCard?.data?.selectedCountry) {
        return addNewCard.data.selectedCountry;
    }
    const selectedCurrency = policy?.outputCurrency ? currencyList?.[policy.outputCurrency] : null;
    const countries = selectedCurrency?.countries;

    if (policy?.outputCurrency === CONST.CURRENCY.EUR && countryByIp && countries?.includes(countryByIp)) {
        return countryByIp;
    }
    const country = countries?.[0];
    return country ?? '';
}, [addNewCard?.data.selectedCountry, countryByIp, currencyList, policy?.outputCurrency]);

const [currentCountry, setCurrentCountry] = useState<string | undefined>(getCountry);

useEffect(() => {
    setCurrentCountry(getCountry());
}, [getCountry]);

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

N/A

[melvin-bot]

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

[melvin-bot]

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