[hold #61414] [$250] [Personal Card Import] Selected country is not scrolled into viewport

[amyevans]

Version Number:
Reproducible in staging?: y
Reproducible in production?: y
If this was caught during regression testing, add the test name, ID and link from BrowserStack:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Expensify/Expensify Issue URL:
Issue reported by:
Slack conversation (hyperlinked to channel name): #migrate

Action Performed:

Prereq: have a default country that will appear below the fold in the list (e.g., Spain)

1. Open the personal cards flow on mobile
2. Navigate to the "Where's your bank located?" page
3. Observe the position of the selected country in the viewport

Expected Result:

The selected country should be scrolled into the current viewport so the user can see their selection. Ideally the selected item should be visible above the "Next" button. This should match the behavior from the company cards import flow.

Actual Result:

The selected country is not scrolled into view.

Workaround:

The user can manually scroll down to verify their selection.

Platforms:

Select the officially supported platforms where the issue was reproduced:

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

Screenshots/Videos

Issue Owner

Current Issue Owner: @ShridharGoel

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022043694617670432001
• Upwork Job ID: 2043694617670432001
• Last Price Increase: 2026-04-20

[MelvinBot]

Proposal

What is the root cause of that problem?

The personal card SelectCountryStep (App/src/pages/settings/Wallet/PersonalCards/steps/SelectCountryStep.tsx:43) initializes currentCountry via useState(getCountry). The getCountry function depends on Onyx values (currencyList, countryByIp) that may not be loaded on the first render, causing it to return an empty string.

This means initiallyFocusedItemKey is '' when the SelectionList first mounts, so FlashList's initialScrollIndex resolves to -1 and no scroll occurs.

When Onyx data loads later, the useEffect on line 64 updates currentCountry to the correct value (e.g. 'ES'). The useSelectedItemFocusSync hook then calls setFocusedIndex, which triggers scrollToIndex — but FlashList hasn't computed layouts for off-screen items yet, so scrollToIndex throws (silently caught at BaseSelectionList.tsx:172) and the list stays at the top.

The company card flow works because currentCountry is computed as a derived value (workspace/companyCards/addNew/SelectCountryStep.tsx:44), and policy data is typically already loaded when the user navigates from workspace settings — so initiallyFocusedItemKey is valid on the very first render and initialScrollIndex works during FlashList's initial layout.

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

In the personal card SelectCountryStep, delay rendering the SelectionList until currentCountry has a valid value. Add a loading/skeleton state while Onyx values (countryByIp, currencyList) are still loading. This ensures that when SelectionList mounts, initiallyFocusedItemKey is a valid country code and FlashList's initialScrollIndex scrolls to it during initial layout — matching the company card flow behavior.

Alternatively, refactor currentCountry to be a derived value (like the company card flow) instead of useState + useEffect, and gate the SelectionList render on the derived value being non-empty.

What alternative solutions did you explore? (Optional)

• Retry scrollToIndex after a delay: Adding a setTimeout-based retry when the silent catch fires would be fragile and timing-dependent.
• Fix useSelectedItemFocusSync to also scroll: The hook currently only calls setFocusedIndex which triggers onFocusedIndexChange → scrollToIndex, but this path fails when FlashList hasn't computed off-screen layouts. Adding a fallback scroll mechanism here would be a broader change with wider impact.

Investigation details

Data flow on mount (current broken path):

1. SelectCountryStep mounts → countryByIp not yet loaded from Onyx
2. getCountry() returns '' → useState('')
3. initiallyFocusedItemKey='' → initialFocusedIndex=-1 → initialScrollIndex=-1 → no scroll
4. Onyx loads → useEffect updates currentCountry to 'ES'
5. useSelectedItemFocusSync detects change → setFocusedIndex(16) → scrollToIndex(16)
6. FlashList throws because layout for index 16 isn't computed → error silently caught
7. List remains at top

Working company card flow:

1. User navigates from workspace settings → policy data already in Onyx
2. currentCountry derived directly: selectedCountry ?? addNewCard?.data?.selectedCountry ?? getPlaidCountry(policy?.outputCurrency, currencyList, countryByIp) — valid on first render
3. initiallyFocusedItemKey='ES' → initialScrollIndex=16 → FlashList scrolls during initial layout

Key files:

• App/src/pages/settings/Wallet/PersonalCards/steps/SelectCountryStep.tsx — personal card country step
• App/src/pages/workspace/companyCards/addNew/SelectCountryStep.tsx — company card country step (working reference)
• App/src/components/SelectionList/BaseSelectionList.tsx:574 — initialScrollIndex prop
• App/src/components/SelectionList/hooks/useSelectedItemFocusSync.ts — focus sync (no scroll)

Possibly related: #69184 (move pre-selected list items to top throughout the app)

---

Next Steps for Contributor+ team: Reply with @MelvinBot implement this to create a draft PR, @MelvinBot <your feedback> to refine this analysis, or explain why you are rejecting Melvin's proposal.

[melvin-bot]

Current assignee @ShridharGoel is eligible for the External assigner, not assigning anyone new.

[melvin-bot]

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

[trasnake87]

Proposal

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

When users open the personal card import flow and land on the "Where's your bank located?" page, the pre-selected country (derived from their locale/IP, e.g. Spain) is not scrolled into the viewport, forcing them to manually scroll down to confirm the selection.

What is the root cause of that problem?

The helper getPlaidCountry in src/libs/CardUtils.ts#L789 returns an empty string whenever currencyList is not yet hydrated from Onyx, and also whenever the user's currency is EUR but countryByIp is not in the matched countries array. On the very first render of the page, Onyx-backed currencyList is frequently still loading, so the helper hands back ''. That empty string is what initiallyFocusedItemKey receives, which makes the FlashList initialScrollIndex resolve to -1 — so the list mounts at the top regardless of what eventually becomes the selected country once Onyx catches up.

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

Have getPlaidCountry fall back to countryByIp (and finally to CONST.COUNTRY.US) whenever it cannot determine a country from the currency list. That guarantees a non-empty key on the first render, so FlashList's initialScrollIndex is valid and the list mounts scrolled to the correct row — no extra code in the screen component, no new effects, and it fixes any other caller of getPlaidCountry that relies on a meaningful default.

function getPlaidCountry(outputCurrency?: string, currencyList?: CurrencyList, countryByIp?: string) {
    const selectedCurrency = outputCurrency ? currencyList?.[outputCurrency] : null;
    const countries = selectedCurrency?.countries;

    if (outputCurrency === CONST.CURRENCY.EUR) {
        if (countryByIp && countries?.includes(countryByIp)) {
            return countryByIp;
        }
        return countryByIp ?? CONST.COUNTRY.US;
    }
    return countries?.[0] ?? countryByIp ?? CONST.COUNTRY.US;
}

[trasnake87]

Contributor details
Your Expensify account email: trasnake87@gmail.com
Upwork Profile Link: https://www.upwork.com/freelancers/~010f770315ab181656

[melvin-bot]

✅ Contributor details stored successfully. Thank you for contributing to Expensify!

[yuvrajangadsingh]

Proposal

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

When opening the personal card import flow on mobile, the pre-selected country (e.g. Spain) is not scrolled into the viewport. The user has to manually scroll down to see their selection. The company card import flow handles this correctly.

What is the root cause of that problem?

The personal card SelectCountryStep (src/pages/settings/Wallet/PersonalCards/steps/SelectCountryStep.tsx) manages currentCountry via useState + useEffect, while the working company card version (src/pages/workspace/companyCards/addNew/SelectCountryStep.tsx:44) uses a derived value.

Here's the problem with the personal card pattern:

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

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

getCountry depends on currencyList and countryByIp from Onyx. If either isn't loaded on the first render, getPlaidCountry returns '' (src/libs/CardUtils.ts:756). So currentCountry starts as '', and initiallyFocusedItemKey is ''.

In BaseSelectionList, FlashList receives initialScrollIndex (BaseSelectionList.tsx:554), which is derived from initiallyFocusedItemKey. Since no item has keyForList === '', initialFocusedIndex resolves to -1, and FlashList mounts with no scroll.

When Onyx data loads on the next render, the useEffect updates currentCountry to the correct value (e.g. 'ES'). But initialScrollIndex is only honored during FlashList's initial mount, so the change is ignored. The useSelectedItemFocusSync hook (hooks/useSelectedItemFocusSync.ts:40) then tries to call setFocusedIndex which triggers scrollToIndex (BaseSelectionList.tsx:169), but FlashList throws for items whose layouts haven't been computed yet. The error is silently caught (BaseSelectionList.tsx:170-173), and the list stays at the top.

The company card flow works because currentCountry is a derived value (selectedCountry ?? addNewCard?.data?.selectedCountry ?? getPlaidCountry(...)) that updates synchronously within the same render when Onyx data arrives, giving FlashList a valid initialScrollIndex on its first render.

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

Refactor the personal card SelectCountryStep to match the company card pattern exactly. Replace the useState/useEffect approach with a derived value.

In src/pages/settings/Wallet/PersonalCards/steps/SelectCountryStep.tsx:

1. Remove the getCountry function and the useEffect that calls it
2. Replace:

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

with:

const [selectedCountry, setSelectedCountry] = useState<string | null>(null);
const currentCountry = selectedCountry ?? addNewPersonalCard?.data?.selectedCountry ?? getPlaidCountry(currency, currencyList, countryByIp);

3. Update onSelectionChange to set selectedCountry:

const onSelectionChange = (country: Option) => {
    setSelectedCountry(country.value ?? null);
};

This mirrors the company card SelectCountryStep at lines 43-44. currentCountry becomes a derived value that's correct as soon as Onyx data is available, so initiallyFocusedItemKey is valid on FlashList's first render and initialScrollIndex scrolls to the right position.

What alternative solutions did you explore? (Optional)

Gating the SelectionList render on currentCountry being non-empty (show a loading state until Onyx loads) would also work, but it's more code and introduces a visible loading flash. The derived value approach is simpler, matches the existing company card pattern, and handles the case where Onyx data is already cached (the common path for returning users) with zero delay.