[$250] Cards - Mock selection is removed after connecting to online

[applause-bot]

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.4.44-2
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/66164607/folder/13176706/41236864/1600127865
Email or phone of affected tester (no customers): dreamnitethedragon+nwjsiaa@gmail.com
Issue reported by: Applause Internal Team
Bug source: Regression TC Execution
Device used: Win 10 chrome
App Component: Workspace Settings

Action Performed:

1. Go to staging.new.expensify.com
2. Go to workspace settings -company card
3. Select country United states - direct feed
4. Toggle on forced offline
5. Tap next
6. Select Mock
7. Toggle off forced offline
8. Tap outside

Expected Result:

Mock radio button selection must not be removed after connecting to online.

Actual Result:

Mock radio button selection is removed after connecting to online.

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug7216664_1784917040870.bandicam_2026-07-24_23-37-46-500.mp4

View all open jobs on GitHub

Applause Internal Information
Exported by: Julia Ponikarchuk
Bug ID: 7216664

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022080735590383974290
• Upwork Job ID: 2080735590383974290
• Last Price Increase: 2026-07-24

Issue Owner

Current Issue Owner: @rojiphil

[applause-bot]

While Applause doesn't embed attachments for this bug, here are the links for quick view:
https://platform.applause.com/services/links/v1/external/93927fba9a955d4320f8d6ab4ac1c374ac34ae57124d474fdd68d4bcdff9f90e

[MelvinBot]

Proposal

What is the root cause of that problem?

On the Select bank step, the chosen bank (e.g. "Mock") is held only in component-local React state, not in Onyx. It is written to Onyx (ADD_NEW_COMPANY_CARD.data.selectedBank) only when the user taps Next — and Next is disabled while offline. So during the offline repro the selection never reaches Onyx.

When you reconnect, the queued OpenPolicyAddCardFeedPage request flushes. Its Onyx metadata flips to loading, which makes DynamicAddNewCardPage render the full-screen loader and unmount SelectBankStep. Unmounting destroys the local state, and when the step remounts the radio falls back to the (empty) Onyx value → "Mock" appears deselected.

Evidence (App @ 70f8a81)

• Selection lives only in local state and merely falls back to Onyx: SelectBankStep.tsx:40-41
• Row tap only sets local state, never Onyx: SelectBankStep.tsx:122-125
• Only submit() persists to Onyx, and Next is isDisabled: isOffline: SelectBankStep.tsx:45-59, :101
• Reconnect flushes openPolicyAddCardFeedPage; its loading metadata unmounts the step via the full-screen loader guard: DynamicAddNewCardPage.tsx:78-93

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

Persist the bank selection to Onyx on tap instead of holding it in transient local state, so it survives the remount on reconnect.

In SelectBankStep.tsx, change onSelectRow to call setAddNewCompanyCardStepAndData with data: {selectedBank: value} (keeping the current step so the merge doesn't clobber currentStep), clear the error, and drop the localBankSelected useState so bankSelected reads directly from addNewCard?.data?.selectedBank. Because the value is now in Onyx, remounting on reconnect restores the "Mock" radio.

What alternative solutions did you explore? (Optional)

Alternatively, avoid unmounting an already-rendered step on a transient reconnect refresh at DynamicAddNewCardPage.tsx:85 (only show the full-screen loader on initial mount). This is broader and doesn't address the underlying "selection not persisted" issue, so persisting on select is preferred.

---

Next Steps for Contributor+ team:
To accept: @MelvinBot implement [this](https://github.com/Expensify/App/issues/97006) to create a draft PR.
To refine: @MelvinBot <your feedback>
To reject: Explain why you are rejecting Melvin's proposal.

[ashu75575]

🚨 Edited by proposal-police: This proposal was edited at 2026-07-24 19:26:50 UTC.

Proposal

What is the root cause of that problem?

Mock is selected only into ephemeral React state. Next is disabled while offline, so that choice is never written to Onyx. Turning off forced offline reconnects the app, reloads company-card feeds, and (for Collect) swaps the add-card flow to a full-screen loader — which unmounts SelectBankStep and wipes localBankSelected. After remount, addNewCard.data.selectedBank is still empty, so the Mock radio appears cleared.

1. Selection is local-only; Next cannot persist it offline

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

Lines 40 to 58 in dd30398

	const [localBankSelected, setLocalBankSelected] = useState<ValueOf<typeof CONST.COMPANY_CARDS.BANKS> | null>();
	const bankSelected = localBankSelected ?? addNewCard?.data?.selectedBank;
	const [hasError, setHasError] = useState(false);
	const isOtherBankSelected = bankSelected === CONST.COMPANY_CARDS.BANKS.OTHER;
	const submit = useCallback(() => {
	if (!bankSelected) {
	setHasError(true);
	} else {
	setAddNewCompanyCardStepAndData({
	step: getCorrectStepForPlaidSelectedBank(bankSelected),
	data: {
	selectedBank: bankSelected,
	cardTitle: !isOtherBankSelected ? bankSelected : undefined,
	feedType: bankSelected === CONST.COMPANY_CARDS.BANKS.STRIPE ? CONST.COMPANY_CARD.FEED_BANK_NAME.STRIPE : undefined,
	},
	isEditing: false,
	});
	}

const [localBankSelected, setLocalBankSelected] = useState<... | null>();
const bankSelected = localBankSelected ?? addNewCard?.data?.selectedBank;

// submit (Next) is the only place that writes selectedBank to Onyx
setAddNewCompanyCardStepAndData({
    step: getCorrectStepForPlaidSelectedBank(bankSelected),
    data: {selectedBank: bankSelected, ...},
});

Row select only updates local state:

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

Lines 122 to 125 in dd30398

	onSelectRow={({value}) => {
	setLocalBankSelected(value);
	setHasError(false);
	}}

onSelectRow={({value}) => {
    setLocalBankSelected(value);
    setHasError(false);
}}

Next is disabled offline:

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

Lines 96 to 104 in dd30398

	const confirmButtonOptions = useMemo(
	() => ({
	showButton: true,
	text: translate('common.next'),
	onConfirm: submit,
	isDisabled: isOffline,
	style: !hasError && styles.mt5,
	}),
	[hasError, isOffline, styles.mt5, submit, translate],

confirmButtonOptions = {
    ...
    isDisabled: isOffline,
}

So after “Select Mock” offline, Onyx still has no selectedBank. Radio isChecked is driven by item.isSelected → bankSelected === bank (local only).

2. Going online reloads feeds under the still-mounted company-cards page

Add New Card opens as RHP over workspace company cards. That underlying page reconnects and reloads feeds:

App/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx

Lines 68 to 70 in dd30398

	const {isOffline} = useNetwork({
	onReconnect: loadPolicyCompanyCardsPage,
	});

const {isOffline} = useNetwork({
    onReconnect: loadPolicyCompanyCardsPage,
});

openPolicyCompanyCardsPage optimistically sets domain feed isLoading: true:

App/src/libs/actions/CompanyCards.ts

Lines 999 to 1008 in 9e17f10

	const optimisticData: Array<OnyxUpdate<typeof ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_DOMAIN_MEMBER>> = onyxLoadingStateUpdates
	? [
	{
	onyxMethod: Onyx.METHOD.MERGE,
	key: `${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_DOMAIN_MEMBER}${domainOrWorkspaceAccountID}`,
	value: {
	isLoading: true,
	errors: null,
	},
	},

value: {
    isLoading: true,
    errors: null,
},

3. Collect loading gate unmounts the bank step

useIsBlockedToAddFeed treats that as loading for Collect (TEAM) policies:

App/src/hooks/useIsBlockedToAddFeed.ts

Lines 31 to 44 in dd30398

	const isLoading = !cardFeeds || !!defaultFeed?.isLoading;
	useEffect(() => {
	if (isLoading) {
	return;
	}
	const connectedFeeds = Object.keys(companyFeeds).filter((feedKey) => !isCSVFeedOrExpensifyCard(feedKey)).length;
	setPrevCompanyFeedsLength(connectedFeeds);
	// eslint-disable-next-line react-hooks/exhaustive-deps -- we don't want this effect to run again
	}, [isLoading]);
	return {
	isBlockedToAddNewFeeds: isCollect && !isLoading && prevCompanyFeedsLength >= 1,
	isAllFeedsResultLoading: isCollect && (isLoading || isAllFeedsResultLoading),

const isLoading = !cardFeeds || !!defaultFeed?.isLoading;
return {
    ...
    isAllFeedsResultLoading: isCollect && (isLoading || isAllFeedsResultLoading),
};

DynamicAddNewCardPage then replaces the whole step tree with a loader (parent stays mounted, so clearAddNewCardFlow cleanup does not run — currentStep stays SELECT_BANK):

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

Lines 85 to 93 in dd30398

	if (isAddCardFeedLoading || isAllFeedsResultLoading || isBlockedToAddNewFeeds) {
	const reasonAttributes: SkeletonSpanReasonAttributes = {
	context: 'AddNewCardPage',
	isAddCardFeedLoading,
	isAllFeedsResultLoading,
	isBlockedToAddNewFeeds,
	};
	return <FullScreenLoadingIndicator reasonAttributes={reasonAttributes} />;
	}

if (isAddCardFeedLoading || isAllFeedsResultLoading || isBlockedToAddNewFeeds) {
    return <FullScreenLoadingIndicator ... />;
}

When loading ends, <SelectBankStep /> mounts again with fresh useState → localBankSelected is unset → bankSelected falls back to empty Onyx → Mock radio is gone. “Tap outside” is just when the cleared UI is noticed after reconnect settles.

Call graph (this bug)

forced offline off → Network reconnect → WorkspaceCompanyCardsPage.onReconnect → openPolicyCompanyCardsPage → defaultFeed.isLoading → useIsBlockedToAddFeed.isAllFeedsResultLoading (Collect) → DynamicAddNewCardPage loader → unmount SelectBankStep → lose localBankSelected.

Surfaces

Only DynamicAddNewCardPage / SelectBankStep for workspace “Add company cards”. Personal-card SelectBankStep shares the local+offline-Next pattern but is out of scope for this repro.

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

A. Persist bank selection on select (required)

In SelectBankStep onSelectRow, write through the existing action so remounts restore from Onyx (same helper already used on Next / elsewhere without a step change, e.g. import toggle):

App/src/libs/actions/CompanyCards.ts

Lines 192 to 197 in 9e17f10

	function setAddNewCompanyCardStepAndData({data, isEditing, step}: NullishDeep<AddNewCompanyCardFlowData>) {
	Onyx.merge(ONYXKEYS.ADD_NEW_COMPANY_CARD, {
	data,
	isEditing,
	currentStep: step,
	});

onSelectRow={({value}) => {
    setLocalBankSelected(value);
    setAddNewCompanyCardStepAndData({
        step: CONST.COMPANY_CARDS.STEP.SELECT_BANK,
        data: {selectedBank: value},
    });
    setHasError(false);
}}

Keep local state for immediate UI; keep bankSelected = localBankSelected ?? addNewCard?.data?.selectedBank. Leave Next/submit as-is (advance step + cardTitle / feedType). Do not enable Next offline.

B. Do not replace mid-flow steps with the feed loader (Collect remount)

In DynamicAddNewCardPage, only use the add-card / Collect feed loading gate before a step exists. Once currentStep is set (e.g. SELECT_BANK), keep that step mounted across feed reloads. Still show the loader when isBlockedToAddNewFeeds (upgrade redirect).

if (isBlockedToAddNewFeeds || (!currentStep && (isAddCardFeedLoading || isAllFeedsResultLoading))) {
    return <FullScreenLoadingIndicator ... />;
}

Regression scope

• Do not change WorkspaceCompanyCardsPage reconnect reload (still needed for the cards list).
• Do not change useIsBlockedToAddFeed Collect semantics globally.
• Do not enable Next while offline.
• Personal cards bank step not part of this issue.

What alternative solutions did you explore? (Optional)

1. Loader-only (B without A) — Survives this Collect remount, but selection stays fragile for any other remount and still never reaches Onyx while Next is offline. Incomplete.

2. Persist-only (A without B) — Fixes the radio after remount, but Collect users still flash a full-screen loader mid-flow. Incomplete UX for the same reconnect path.

3. Skip openPolicyCompanyCardsPage while Add New RHP is open — Brittle navigation coupling; other feed isLoading writers could still remount via the same gate.

4. Enable Next offline — Wrong: later bank connection / feed setup needs network; Next is disabled for that reason.

Before

Screen.Recording.2026-07-25.at.1.46.47.AM.mov

After

Screen.Recording.2026-07-25.at.1.57.23.AM.mov

[abbasifaizan70]

Proposal

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

On the "Add new company card" wizard, after choosing country United States + Direct feed, the user reaches the bank-selection step and picks Mock while the app is forced offline. After turning connectivity back on and tapping outside the row, the Mock selection is no longer shown as selected — it should remain selected.

What is the root cause of that problem?

SelectBankStep keeps the chosen bank only in local component state (useState), and that state is the only place the selection lives until the user explicitly presses "Next". onSelectRow never writes the choice to Onyx — it just calls setLocalBankSelected:

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

Lines 40 to 43 in 300ed3c

	const [localBankSelected, setLocalBankSelected] = useState<ValueOf<typeof CONST.COMPANY_CARDS.BANKS> | null>();
	const bankSelected = localBankSelected ?? addNewCard?.data?.selectedBank;
	const [hasError, setHasError] = useState(false);
	const isOtherBankSelected = bankSelected === CONST.COMPANY_CARDS.BANKS.OTHER;

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

Lines 119 to 126 in 300ed3c

	<SelectionList
	data={data}
	ListItem={SingleSelectListItem}
	onSelectRow={({value}) => {
	setLocalBankSelected(value);
	setHasError(false);
	}}
	initiallyFocusedItemKey={bankSelected ?? undefined}

The only code path that ever persists selectedBank to Onyx is submit(), which fires exclusively when the user presses the "Next"/confirm button:

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

Lines 45 to 59 in 300ed3c

	const submit = useCallback(() => {
	if (!bankSelected) {
	setHasError(true);
	} else {
	setAddNewCompanyCardStepAndData({
	step: getCorrectStepForPlaidSelectedBank(bankSelected),
	data: {
	selectedBank: bankSelected,
	cardTitle: !isOtherBankSelected ? bankSelected : undefined,
	feedType: bankSelected === CONST.COMPANY_CARDS.BANKS.STRIPE ? CONST.COMPANY_CARD.FEED_BANK_NAME.STRIPE : undefined,
	},
	isEditing: false,
	});
	}
	}, [bankSelected, isOtherBankSelected]);

Crucially, unlike the sibling wizard steps (SelectCountryStep, SelectFeedType), this specific step force-disables that confirm button whenever the app is offline:

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

Lines 96 to 105 in 300ed3c

	const confirmButtonOptions = useMemo(
	() => ({
	showButton: true,
	text: translate('common.next'),
	onConfirm: submit,
	isDisabled: isOffline,
	style: !hasError && styles.mt5,
	}),
	[hasError, isOffline, styles.mt5, submit, translate],
	);

Choosing a bank is a purely local, no-network operation (it doesn't need connectivity to record the choice), so this offline gate serves no real purpose here — it only forces the user to linger on the screen with an unsaved, purely-local selection until connectivity returns. In the reported repro, the user selects Mock while offline (blocked from confirming), reconnects, and then taps outside instead of "Next". Since localBankSelected was never written to Onyx via setAddNewCompanyCardStepAndData (in src/libs/actions/CompanyCards.ts), any subsequent unmount/remount of this step (leaving the modal and coming back, or the RHP dismissing on an outside tap) falls back to whatever was last persisted in ADD_NEW_COMPANY_CARD.data.selectedBank — which is still empty — so the row shows as unselected, i.e. the Mock selection appears "removed".

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

Persist the bank choice to Onyx as soon as it's selected instead of only on "Next", so the selection is never left as ephemeral, easily-lost local state. onSelectRow should call the existing setAddNewCompanyCardStepAndData action (already imported in this file) to merge data.selectedBank right away, keeping the current step unchanged:

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

Lines 119 to 126 in 300ed3c

	<SelectionList
	data={data}
	ListItem={SingleSelectListItem}
	onSelectRow={({value}) => {
	setLocalBankSelected(value);
	setHasError(false);
	}}
	initiallyFocusedItemKey={bankSelected ?? undefined}

onSelectRow={({value}) => {
    setLocalBankSelected(value);
    setAddNewCompanyCardStepAndData({data: {selectedBank: value}, isEditing: false});
    setHasError(false);
}}

This makes addNewCard?.data?.selectedBank (already read at line 41 as the fallback source of truth) reflect the latest choice immediately, so the selection survives regardless of what happens afterward (leaving the step, the RHP being dismissed by an outside tap, or the offline/online cycle in the repro).

Additionally, the offline-only gate on the confirm button no longer needs to block a purely local selection, so isDisabled: isOffline at line 101 should be removed to match the behavior of SelectCountryStep and SelectFeedType, which don't disable "Next" while offline for the same kind of local, no-network selection.

[mukhrr]

Proposal

What is the root cause of that problem?

I found that SelectBankStep keeps the selected bank only in component-local state. Although the rendered radio item uses that state, selectedBank is not written to the add-card Onyx draft until the disabled Next button is pressed.

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

Lines 38 to 59 in 70f8a81

	const [addNewCard] = useOnyx(ONYXKEYS.ADD_NEW_COMPANY_CARD);
	const [shouldUseStagingServer = isUsingStagingApi()] = useOnyx(ONYXKEYS.SHOULD_USE_STAGING_SERVER);
	const [localBankSelected, setLocalBankSelected] = useState<ValueOf<typeof CONST.COMPANY_CARDS.BANKS> | null>();
	const bankSelected = localBankSelected ?? addNewCard?.data?.selectedBank;
	const [hasError, setHasError] = useState(false);
	const isOtherBankSelected = bankSelected === CONST.COMPANY_CARDS.BANKS.OTHER;
	const submit = useCallback(() => {
	if (!bankSelected) {
	setHasError(true);
	} else {
	setAddNewCompanyCardStepAndData({
	step: getCorrectStepForPlaidSelectedBank(bankSelected),
	data: {
	selectedBank: bankSelected,
	cardTitle: !isOtherBankSelected ? bankSelected : undefined,
	feedType: bankSelected === CONST.COMPANY_CARDS.BANKS.STRIPE ? CONST.COMPANY_CARD.FEED_BANK_NAME.STRIPE : undefined,
	},
	isEditing: false,
	});
	}
	}, [bankSelected, isOtherBankSelected]);

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

Lines 96 to 126 in 70f8a81

	const confirmButtonOptions = useMemo(
	() => ({
	showButton: true,
	text: translate('common.next'),
	onConfirm: submit,
	isDisabled: isOffline,
	style: !hasError && styles.mt5,
	}),
	[hasError, isOffline, styles.mt5, submit, translate],
	);
	return (
	<ScreenWrapper
	testID="SelectBankStep"
	enableEdgeToEdgeBottomSafeAreaPadding
	shouldEnablePickerAvoiding={false}
	shouldEnableMaxHeight
	>
	<HeaderWithBackButton
	title={translate('workspace.companyCards.addCards')}
	onBackButtonPress={handleBackButtonPress}
	/>
	<Text style={[styles.textHeadlineLineHeightXXL, styles.ph5, styles.mv3]}>{translate('workspace.companyCards.addNewCard.whoIsYourBankAccount')}</Text>
	<SelectionList
	data={data}
	ListItem={SingleSelectListItem}
	onSelectRow={({value}) => {
	setLocalBankSelected(value);
	setHasError(false);
	}}
	initiallyFocusedItemKey={bankSelected ?? undefined}

When reconnecting makes the parent display its loading indicator, SelectBankStep is unmounted. After it mounts again, the local selection is gone and there is no persisted selectedBank to restore, so Mock Bank becomes unselected.

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

Lines 78 to 92 in 70f8a81

	useEffect(() => {
	// If the user only has a domain feed, then the workspace account may not have been created yet, or the "Company cards" workspace-level feature may not have been enabled yet
	// However, adding a workspace feed requires a workspace account with "Company cards" feature enabled.
	// Calling openPolicyAddCardFeedPage will trigger the creation of the workspace account (if necessary) and enable the "Company cards" feature (if not enabled).
	openPolicyAddCardFeedPage(policyID);
	}, [policyID]);
	if (isAddCardFeedLoading || isAllFeedsResultLoading || isBlockedToAddNewFeeds) {
	const reasonAttributes: SkeletonSpanReasonAttributes = {
	context: 'AddNewCardPage',
	isAddCardFeedLoading,
	isAllFeedsResultLoading,
	isBlockedToAddNewFeeds,
	};
	return <FullScreenLoadingIndicator reasonAttributes={reasonAttributes} />;

The regression originated when offline interaction was enabled for this screen by replacing the full-page offline blocker with a disabled confirmation button. That allowed a bank to be selected offline without making its local state survive a remount.

c77ed25

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

I think we should update SelectBankStep.onSelectRow to immediately persist selectedBank through setAddNewCompanyCardStepAndData, while retaining the local state for immediate UI feedback:

 onSelectRow={({value}) => {
     setLocalBankSelected(value);
+    setAddNewCompanyCardStepAndData({data: {selectedBank: value}});
     setHasError(false);
 }}

This action already merges partial data into ONYXKEYS.ADD_NEW_COMPANY_CARD, so it will preserve the current step and the rest of the draft.

App/src/libs/actions/CompanyCards.ts

Lines 192 to 197 in 70f8a81

	function setAddNewCompanyCardStepAndData({data, isEditing, step}: NullishDeep<AddNewCompanyCardFlowData>) {
	Onyx.merge(ONYXKEYS.ADD_NEW_COMPANY_CARD, {
	data,
	isEditing,
	currentStep: step,
	});

After a reconnect/remount, bankSelected will fall back to the persisted value and keep the correct radio item selected. The existing submit behavior remains unchanged: Next still determines the following step and stores the derived cardTitle/feedType, while the back action still explicitly clears selectedBank. Other selection steps are unaffected; this case is unique because SelectBankStep permits selecting an item offline while disabling the action that currently persists it.

I would add a test that selects Mock Bank, remounts SelectBankStep, and verifies that Mock Bank remains selected from the add-card Onyx draft.

[ahmdshrif]

Proposal

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

In the add-company-card flow, a bank chosen while offline (here "Mock") is deselected the moment the app reconnects. The user is still on the bank-selection step, but the radio selection is gone.

What is the root cause of that problem?

Structural cause: every wizard step keeps its not-yet-submitted selection only in ephemeral component state, while the host page swaps the current step for a full-screen loader whenever feed data is (re)loading — and a reconnect re-triggers exactly that load. The chain:

1. SelectBankStep stores the tapped bank in local state only (setLocalBankSelected); Onyx (ADD_NEW_COMPANY_CARD.data.selectedBank) is written only on Next:

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

   Lines 40 to 41 in 70f8a81

   	const [localBankSelected, setLocalBankSelected] = useState<ValueOf<typeof CONST.COMPANY_CARDS.BANKS> | null>();
   	const bankSelected = localBankSelected ?? addNewCard?.data?.selectedBank;

   and

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

   Lines 45 to 59 in 70f8a81

   	const submit = useCallback(() => {
   	if (!bankSelected) {
   	setHasError(true);
   	} else {
   	setAddNewCompanyCardStepAndData({
   	step: getCorrectStepForPlaidSelectedBank(bankSelected),
   	data: {
   	selectedBank: bankSelected,
   	cardTitle: !isOtherBankSelected ? bankSelected : undefined,
   	feedType: bankSelected === CONST.COMPANY_CARDS.BANKS.STRIPE ? CONST.COMPANY_CARD.FEED_BANK_NAME.STRIPE : undefined,
   	},
   	isEditing: false,
   	});
   	}
   	}, [bankSelected, isOtherBankSelected]);

   . The selection survives only while the component stays mounted.
2. The add-card flow is an RHP modal, so WorkspaceCompanyCardsPage stays mounted underneath it. That page re-fetches feeds on every reconnect:

   App/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx

   Lines 68 to 70 in 70f8a81

   	const {isOffline} = useNetwork({
   	onReconnect: loadPolicyCompanyCardsPage,
   	});

   .
3. openPolicyCompanyCardsPage optimistically merges a root-level isLoading: true into the domain-member NVP:

   App/src/libs/actions/CompanyCards.ts

   Lines 999 to 1010 in 70f8a81

   	const optimisticData: Array<OnyxUpdate<typeof ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_DOMAIN_MEMBER>> = onyxLoadingStateUpdates
   	? [
   	{
   	onyxMethod: Onyx.METHOD.MERGE,
   	key: `${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_DOMAIN_MEMBER}${domainOrWorkspaceAccountID}`,
   	value: {
   	isLoading: true,
   	errors: null,
   	},
   	},
   	]
   	: [];

   .
4. useIsBlockedToAddFeed folds that flag into its loading result for Collect workspaces: isLoading = !cardFeeds || !!defaultFeed?.isLoading and isAllFeedsResultLoading: isCollect && (isLoading || ...):

   App/src/hooks/useIsBlockedToAddFeed.ts

   Line 31 in 70f8a81

   const isLoading = !cardFeeds || !!defaultFeed?.isLoading;

   and

   App/src/hooks/useIsBlockedToAddFeed.ts

   Line 44 in 70f8a81

   isAllFeedsResultLoading: isCollect && (isLoading || isAllFeedsResultLoading),

   .
5. DynamicAddNewCardPage early-returns a FullScreenLoadingIndicator while that flag is true, unmounting the current step:

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

   Lines 85 to 93 in 70f8a81

   	if (isAddCardFeedLoading || isAllFeedsResultLoading || isBlockedToAddNewFeeds) {
   	const reasonAttributes: SkeletonSpanReasonAttributes = {
   	context: 'AddNewCardPage',
   	isAddCardFeedLoading,
   	isAllFeedsResultLoading,
   	isBlockedToAddNewFeeds,
   	};
   	return <FullScreenLoadingIndicator reasonAttributes={reasonAttributes} />;
   	}

   . When successData clears isLoading, SelectBankStep remounts with fresh local state, and the Onyx fallback is empty because Next was never pressed → no radio selected.

This explains every detail: only the step child unmounts — DynamicAddNewCardPage itself doesn't, so its cleanup clearAddNewCardFlow (

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

Lines 72 to 76 in 70f8a81

	useEffect(() => {
	return () => {
	clearAddNewCardFlow();
	};
	}, []);

) never runs and currentStep survives; the user stays on the bank step with just the radio cleared, right at reconnect, on both Android and Web (the chain is shared code).

Blast radius — the same reconnect unmount silently wipes every step that holds an unsent choice in local state:

• SelectFeedType (localTypeSelected): a "Commercial feed" choice reverts to the "Direct feed" default:

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

  Lines 29 to 34 in 70f8a81

  	const [localTypeSelected, setLocalTypeSelected] = useState<ValueOf<typeof CONST.COMPANY_CARDS.FEED_TYPE>>();
  	const [hasError, setHasError] = useState(false);
  	const doesCountrySupportPlaid = isPlaidSupportedCountry(addNewCard?.data?.selectedCountry);
  	const isUSCountry = addNewCard?.data?.selectedCountry === CONST.COUNTRY.US;
  	const defaultTypeSelected = addNewCard?.data?.selectedFeedType ?? (doesCountrySupportPlaid ? CONST.COMPANY_CARDS.FEED_TYPE.DIRECT : CONST.COMPANY_CARDS.FEED_TYPE.CUSTOM);
  	const typeSelected = localTypeSelected ?? defaultTypeSelected;

• CardTypeStep (localTypeSelected):

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

  Lines 93 to 94 in 70f8a81

  	const [localTypeSelected, setLocalTypeSelected] = useState<CardFeedProvider>();
  	const typeSelected = localTypeSelected ?? addNewCard?.data?.feedType;

• SelectCountryStep (selectedCountry):

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

  Lines 47 to 48 in 70f8a81

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

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

Scope the blocking loader to flow entry, so a background refetch can no longer tear down an in-progress wizard. In DynamicAddNewCardPage (

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

Line 85 in 70f8a81

if (isAddCardFeedLoading || isAllFeedsResultLoading || isBlockedToAddNewFeeds) {

):

if (isAddCardFeedLoading || (isAllFeedsResultLoading && !currentStep) || isBlockedToAddNewFeeds) {

Regression safety: currentStep is null until the user advances past the first screen, so first entry shows the loader exactly as today, the Collect one-feed block (isBlockedToAddNewFeeds + upgrade redirect) is preserved, and other useIsBlockedToAddFeed consumers (BankConnection, WorkspaceCompanyCardFeedSelectorPage) are untouched. This one change fixes the reported bank-step bug and the three sibling steps at their single convergence point.

Why the obvious spot fix does not work: persisting the bank to Onyx from onSelectRow only patches SelectBankStep — reconnect still swaps the wizard for a loader mid-flow, and SelectFeedType/CardTypeStep/SelectCountryStep keep the identical ephemeral-state pattern, so an unsubmitted feed-type or country choice is still silently reset (feed type even reverts to the "Direct" default). The unmount is the mechanism; only removing it fixes the class.

What alternative solutions did you explore? (Optional)

1. Persist each selection to Onyx on tap (setAddNewCompanyCardStepAndData({data: {selectedBank: value}}) in onSelectRow). Survives any remount, but leaves the mid-flow loader flash and needs touching all four steps; incomplete on its own.
2. Ignore defaultFeed?.isLoading in useIsBlockedToAddFeed once RAM_ONLY_COMPANY_CARDS_LOADING_STATE.hasOnceLoadedPage is set — the codebase already uses this flag to "gate repeat page skeletons" (

   App/src/libs/actions/CompanyCards.ts

   Lines 1022 to 1029 in 70f8a81

   	{
   	onyxMethod: Onyx.METHOD.MERGE,
   	key: `${ONYXKEYS.COLLECTION.RAM_ONLY_COMPANY_CARDS_LOADING_STATE}${domainOrWorkspaceAccountID}`,
   	value: {
   	// RAM-only so background refresh cannot wipe this; gates repeat page skeletons.
   	hasOnceLoadedPage: true,
   	},
   	},

   ). Aligned with precedent, but it changes a shared hook consumed by BankConnection (web + native) and the feed selector page — wider blast radius than the one-line page-local gate.

[KJ21-ENG]

🚨 Edited by proposal-police: This proposal was edited at 2026-07-24 19:44:36 UTC.

Proposal

What is the root cause of that problem?

SelectBankStep keeps a row click only in localBankSelected; its fallback is ADD_NEW_COMPANY_CARD.data.selectedBank, but that durable value is not written until the user presses Next.

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

Lines 38 to 57 in 70f8a81

	const [addNewCard] = useOnyx(ONYXKEYS.ADD_NEW_COMPANY_CARD);
	const [shouldUseStagingServer = isUsingStagingApi()] = useOnyx(ONYXKEYS.SHOULD_USE_STAGING_SERVER);
	const [localBankSelected, setLocalBankSelected] = useState<ValueOf<typeof CONST.COMPANY_CARDS.BANKS> | null>();
	const bankSelected = localBankSelected ?? addNewCard?.data?.selectedBank;
	const [hasError, setHasError] = useState(false);
	const isOtherBankSelected = bankSelected === CONST.COMPANY_CARDS.BANKS.OTHER;
	const submit = useCallback(() => {
	if (!bankSelected) {
	setHasError(true);
	} else {
	setAddNewCompanyCardStepAndData({
	step: getCorrectStepForPlaidSelectedBank(bankSelected),
	data: {
	selectedBank: bankSelected,
	cardTitle: !isOtherBankSelected ? bankSelected : undefined,
	feedType: bankSelected === CONST.COMPANY_CARDS.BANKS.STRIPE ? CONST.COMPANY_CARD.FEED_BANK_NAME.STRIPE : undefined,
	},
	isEditing: false,
	});

The row handler therefore updates only component state even though the list renders its selected marker from bankSelected. Next is disabled while offline, so the reproduced selection cannot reach the wizard draft.

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

Lines 96 to 126 in 70f8a81

	const confirmButtonOptions = useMemo(
	() => ({
	showButton: true,
	text: translate('common.next'),
	onConfirm: submit,
	isDisabled: isOffline,
	style: !hasError && styles.mt5,
	}),
	[hasError, isOffline, styles.mt5, submit, translate],
	);
	return (
	<ScreenWrapper
	testID="SelectBankStep"
	enableEdgeToEdgeBottomSafeAreaPadding
	shouldEnablePickerAvoiding={false}
	shouldEnableMaxHeight
	>
	<HeaderWithBackButton
	title={translate('workspace.companyCards.addCards')}
	onBackButtonPress={handleBackButtonPress}
	/>
	<Text style={[styles.textHeadlineLineHeightXXL, styles.ph5, styles.mv3]}>{translate('workspace.companyCards.addNewCard.whoIsYourBankAccount')}</Text>
	<SelectionList
	data={data}
	ListItem={SingleSelectListItem}
	onSelectRow={({value}) => {
	setLocalBankSelected(value);
	setHasError(false);
	}}
	initiallyFocusedItemKey={bankSelected ?? undefined}

The company-cards page remains mounted behind the add-card RHP and calls openPolicyCompanyCardsPage on reconnect. That reload optimistically sets the workspace/domain feed's isLoading flag.

App/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx

Lines 63 to 70 in 70f8a81

	const loadPolicyCompanyCardsPage = useCallback(() => {
	const emailList = Object.keys(getMemberAccountIDsForWorkspace(employeeListRef.current));
	openPolicyCompanyCardsPage(policyID, domainOrWorkspaceAccountID, emailList, translate);
	}, [domainOrWorkspaceAccountID, policyID, translate]);
	const {isOffline} = useNetwork({
	onReconnect: loadPolicyCompanyCardsPage,
	});

App/src/libs/actions/CompanyCards.ts

Lines 995 to 1010 in 70f8a81

	function openPolicyCompanyCardsPage(policyID: string, domainOrWorkspaceAccountID: number, emailList: string[], translate: LocaleContextProps['translate']) {
	// Skip loading state writes when domainOrWorkspaceAccountID is 0 since Onyx discards writes to collection keys with member ID '0'.
	const onyxLoadingStateUpdates = domainOrWorkspaceAccountID !== CONST.DEFAULT_NUMBER_ID;
	const optimisticData: Array<OnyxUpdate<typeof ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_DOMAIN_MEMBER>> = onyxLoadingStateUpdates
	? [
	{
	onyxMethod: Onyx.METHOD.MERGE,
	key: `${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_DOMAIN_MEMBER}${domainOrWorkspaceAccountID}`,
	value: {
	isLoading: true,
	errors: null,
	},
	},
	]
	: [];

For a Collect workspace, useIsBlockedToAddFeed surfaces that flag as isAllFeedsResultLoading, and DynamicAddNewCardPage temporarily replaces the current step with FullScreenLoadingIndicator. The parent wizard remains mounted, but SelectBankStep does not; when the feed reload finishes, the step mounts again with empty local state and an unset Onyx fallback, so every bank row renders unselected.

App/src/hooks/useIsBlockedToAddFeed.ts

Lines 23 to 47 in 70f8a81

	function useIsBlockedToAddFeed(policyID?: string) {
	const policy = usePolicy(policyID);
	const [cardFeeds, allFeedsResult, defaultFeed, , workspaceAccountID] = useCardFeeds(policyID);
	const companyFeeds = getCompanyFeeds(cardFeeds, true);
	const isCollect = isCollectPolicy(policy);
	const isAllFeedsResultLoading = isLoadingOnyxValue(allFeedsResult);
	const [prevCompanyFeedsLength, setPrevCompanyFeedsLength] = useState(0);
	const isLoading = !cardFeeds || !!defaultFeed?.isLoading;
	useEffect(() => {
	if (isLoading) {
	return;
	}
	const connectedFeeds = Object.keys(companyFeeds).filter((feedKey) => !isCSVFeedOrExpensifyCard(feedKey)).length;
	setPrevCompanyFeedsLength(connectedFeeds);
	// eslint-disable-next-line react-hooks/exhaustive-deps -- we don't want this effect to run again
	}, [isLoading]);
	return {
	isBlockedToAddNewFeeds: isCollect && !isLoading && prevCompanyFeedsLength >= 1,
	isAllFeedsResultLoading: isCollect && (isLoading || isAllFeedsResultLoading),
	cardFeeds,
	workspaceAccountID,
	};

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

Lines 45 to 50 in 70f8a81

	function DynamicAddNewCardPage({policy}: WithPolicyAndFullscreenLoadingProps) {
	const policyID = policy?.id;
	const styles = useThemeStyles();
	const [addNewCardFeed, addNewCardFeedMetadata] = useOnyx(ONYXKEYS.ADD_NEW_COMPANY_CARD);
	const {currentStep} = addNewCardFeed ?? {};
	const {isBlockedToAddNewFeeds, isAllFeedsResultLoading, cardFeeds, workspaceAccountID} = useIsBlockedToAddFeed(policyID);

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

Lines 85 to 93 in 70f8a81

	if (isAddCardFeedLoading || isAllFeedsResultLoading || isBlockedToAddNewFeeds) {
	const reasonAttributes: SkeletonSpanReasonAttributes = {
	context: 'AddNewCardPage',
	isAddCardFeedLoading,
	isAllFeedsResultLoading,
	isBlockedToAddNewFeeds,
	};
	return <FullScreenLoadingIndicator reasonAttributes={reasonAttributes} />;
	}

The vulnerable offline state was introduced in PR #74557 / commit c77ed25d8b9aa30709cef7b0beafec5c08ce8a05, which removed the full-page offline blocker but disabled only the confirm button, allowing a bank to be selected offline without making that selection durable.

#74557

This affects any bank selected in this state, not only Mock Bank. Mock Bank is simply the staging-only row used by the regression test.

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

Lines 65 to 83 in 70f8a81

	const data = Object.values(CONST.COMPANY_CARDS.BANKS)
	.filter((bank) => {
	// Only show Mock Bank when the frontend environment is not production or when using the staging server
	if (bank === CONST.COMPANY_CARDS.BANKS.MOCK_BANK) {
	return CONFIG.ENVIRONMENT !== CONST.ENVIRONMENT.PRODUCTION || shouldUseStagingServer;
	}
	if (bank === CONST.COMPANY_CARDS.BANKS.FILE_IMPORT) {
	return false;
	}
	return true;
	})
	.map((bank) => {
	const bankText = bank === CONST.COMPANY_CARDS.BANKS.OTHER ? translate('workspace.companyCards.addNewCard.other') : bank;
	return {
	value: bank,
	text: bankText,
	keyForList: bank,
	isSelected: bankSelected === bank,

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

When a row is selected, immediately merge selectedBank: value through setAddNewCompanyCardStepAndData alongside the existing local-state update, then clear the validation error. This preserves immediate row feedback while ensuring a recreated SelectBankStep can restore the bank through its existing Onyx fallback. Keep the current submit handler responsible for advancing the step and deriving cardTitle and feedType.

The existing action already supports partial flow-data merges, and the Back handler explicitly clears selectedBank, so persisting the row click does not leak the choice after the user backs out.

App/src/libs/actions/CompanyCards.ts

Lines 192 to 204 in 70f8a81

	function setAddNewCompanyCardStepAndData({data, isEditing, step}: NullishDeep<AddNewCompanyCardFlowData>) {
	Onyx.merge(ONYXKEYS.ADD_NEW_COMPANY_CARD, {
	data,
	isEditing,
	currentStep: step,
	});
	}
	function clearAddNewCardFlow() {
	Onyx.set(ONYXKEYS.ADD_NEW_COMPANY_CARD, {
	currentStep: null,
	data: {},
	});

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

Lines 61 to 63 in 70f8a81

	const handleBackButtonPress = () => {
	setAddNewCompanyCardStepAndData({step: CONST.COMPANY_CARDS.STEP.SELECT_FEED_TYPE, data: {selectedBank: null}});
	};

This covers the US Direct-feed route, every selectable bank in the shared step (including Mock), and the Bank Connection and Stripe instruction paths that return to SELECT_BANK.

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

Lines 53 to 64 in 70f8a81

	if (!isDirectSelected) {
	setAddNewCompanyCardStepAndData({
	step: CONST.COMPANY_CARDS.STEP.CARD_TYPE,
	data: {selectedFeedType: typeSelected},
	});
	return;
	}
	const step = isUSCountry ? CONST.COMPANY_CARDS.STEP.SELECT_BANK : CONST.COMPANY_CARDS.STEP.PLAID_CONNECTION;
	setAddNewCompanyCardStepAndData({
	step,
	data: {selectedFeedType: typeSelected},
	});

App/src/pages/workspace/companyCards/BankConnection/index.tsx

Lines 99 to 109 in 70f8a81

	const handleBackButtonPress = () => {
	customWindow?.close();
	// Handle assign card flow
	if (feed) {
	Navigation.goBack();
	return;
	}
	setAddNewCompanyCardStepAndData({step: CONST.COMPANY_CARDS.STEP.SELECT_BANK});
	};

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

Lines 77 to 83 in 70f8a81

	const handleBackButtonPress = () => {
	if (isStripeFeedProvider) {
	setAddNewCompanyCardStepAndData({step: CONST.COMPANY_CARDS.STEP.SELECT_BANK});
	return;
	}
	setAddNewCompanyCardStepAndData({step: CONST.COMPANY_CARDS.STEP.CARD_TYPE});
	};

Keep the reconnect reload, Collect eligibility gate, and offline Next restriction unchanged; they have valid responsibilities. The selection writer is the missing durability boundary.

Test coverage: add a SelectBankStep UI test that selects Mock Bank while offline, verifies the partial wizard-state write, then remounts the step with that saved Onyx value and confirms Mock remains selected and focused. Also cover the Collect reconnect path by toggling the feed loading state so the step is removed and restored, then verify the saved selection is unchanged before Next.

What alternative solutions did you explore? (Optional)

We could change DynamicAddNewCardPage to keep an in-progress step mounted during feed reloads, but that changes a legitimate Collect eligibility/loading guard and still leaves the unsubmitted choice vulnerable to other remounts. We could also enable Next offline, but the following bank-connection flow requires the network. Persisting the choice at its producer fixes every remount without weakening either guard.

[lorretheboy]

Note: This isn't a duplicate — The flagged proposal fixes it in SelectBankStep — persist the choice to Onyx in onSelectRow via setAddNewCompanyCardStepAndData and drop the isDisabled: isOffline gate; its root cause stops at "selection is local-only, remount falls back to empty Onyx" and attributes the remount to leaving the modal / an outside-tap dismissing the RHP. Ours identifies a different, more specific root-cause mechanism (reconnect → WorkspaceCompanyCardsPage feed refetch → isLoading → isAllFeedsResultLoading → DynamicAddNewCardPage swaps the wizard for a full-screen loader that unmounts the step) and fixes it at that convergence point — gating the loader at DynamicAddNewCardPage.tsx:85 on currentStep so a mid-flow background refresh no longer unmounts the current step. Different file, different mechanism, and ours protects every step's unsaved local state (not just the bank row); we also don't touch the offline gate. Same fix ≠ ours.

Proposal

What is the root cause of that problem?

The Mock selection only lives in the localBankSelected React state of SelectBankStep — it isn't written to the ADD_NEW_COMPANY_CARD Onyx draft until the user presses Next, and Next is disabled while offline (isDisabled: isOffline):

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

Lines 40 to 41 in 70f8a81

	const [localBankSelected, setLocalBankSelected] = useState<ValueOf<typeof CONST.COMPANY_CARDS.BANKS> | null>();
	const bankSelected = localBankSelected ?? addNewCard?.data?.selectedBank;

When the network comes back, WorkspaceCompanyCardsPage (still mounted underneath the RHP) re-fetches feeds in its onReconnect handler:

App/src/pages/workspace/companyCards/WorkspaceCompanyCardsPage.tsx

Lines 63 to 70 in 70f8a81

	const loadPolicyCompanyCardsPage = useCallback(() => {
	const emailList = Object.keys(getMemberAccountIDsForWorkspace(employeeListRef.current));
	openPolicyCompanyCardsPage(policyID, domainOrWorkspaceAccountID, emailList, translate);
	}, [domainOrWorkspaceAccountID, policyID, translate]);
	const {isOffline} = useNetwork({
	onReconnect: loadPolicyCompanyCardsPage,
	});

openPolicyCompanyCardsPage optimistically merges isLoading: true into the sharedNVP_private_domain_member_ key:

App/src/libs/actions/CompanyCards.ts

Lines 999 to 1010 in 70f8a81

	const optimisticData: Array<OnyxUpdate<typeof ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_DOMAIN_MEMBER>> = onyxLoadingStateUpdates
	? [
	{
	onyxMethod: Onyx.METHOD.MERGE,
	key: `${ONYXKEYS.COLLECTION.SHARED_NVP_PRIVATE_DOMAIN_MEMBER}${domainOrWorkspaceAccountID}`,
	value: {
	isLoading: true,
	errors: null,
	},
	},
	]
	: [];

useIsBlockedToAddFeed treats that flag as "still loading" (isLoading = !cardFeeds || !!defaultFeed?.isLoading), so isAllFeedsResultLoading flips to true on a Collect workspace:

App/src/hooks/useIsBlockedToAddFeed.ts

Lines 31 to 44 in 70f8a81

	const isLoading = !cardFeeds || !!defaultFeed?.isLoading;
	useEffect(() => {
	if (isLoading) {
	return;
	}
	const connectedFeeds = Object.keys(companyFeeds).filter((feedKey) => !isCSVFeedOrExpensifyCard(feedKey)).length;
	setPrevCompanyFeedsLength(connectedFeeds);
	// eslint-disable-next-line react-hooks/exhaustive-deps -- we don't want this effect to run again
	}, [isLoading]);
	return {
	isBlockedToAddNewFeeds: isCollect && !isLoading && prevCompanyFeedsLength >= 1,
	isAllFeedsResultLoading: isCollect && (isLoading || isAllFeedsResultLoading),

That makes DynamicAddNewCardPage swap the wizard for a full-screen loader, unmounting SelectBankStep mid-flow; when the fetch finishes and the step remounts, localBankSelected is gone and nothing was saved in the draft, so the radio is cleared:

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

Lines 85 to 93 in 70f8a81

	if (isAddCardFeedLoading || isAllFeedsResultLoading || isBlockedToAddNewFeeds) {
	const reasonAttributes: SkeletonSpanReasonAttributes = {
	context: 'AddNewCardPage',
	isAddCardFeedLoading,
	isAllFeedsResultLoading,
	isBlockedToAddNewFeeds,
	};
	return <FullScreenLoadingIndicator reasonAttributes={reasonAttributes} />;
	}

Chain: reconnect → background feed refresh sets isLoading: true → isAllFeedsResultLoading becomes true → the add-card flow is replaced by a loader → SelectBankStep unmounts and its local Mock selection is destroyed.

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

Fix it at the convergence point in DynamicAddNewCardPage: the full-screen loader is only needed on initial entry (to decide whether the Collect workspace is blocked from adding a feed) — a background refresh mid-flow should not blank the wizard. Skip the loader when the flow is already in progress, e.g.:

if (isAddCardFeedLoading || (isAllFeedsResultLoading && !currentStep) || isBlockedToAddNewFeeds) {

On first entry currentStep is null, so the loader still shows until we know whether to block; once the user is past the first step, a reconnect refresh no longer unmounts the current step. This also protects the other steps that keep unsaved local state (e.g. localTypeSelected in SelectFeedType) from the same wipe.

What alternative solutions did you explore? (Optional)

Persist the selection immediately on tap — call setAddNewCompanyCardStepAndData({data: {selectedBank: value}}) in SelectBankStep's onSelectRow (without changing the step) so a remount restores it from the draft. This fixes only the bank step, though; other steps' local state would still be lost, so gating the loader is preferred.