[Due for payment 2026-08-07] [$250] [Exploratory] Money Request - Mark as paid button leads to Add bank page

[jponikarchuk]

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.3.73-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: #90095
Email or phone of affected tester (no customers): expensify416+da2@gmail.com
Issue reported by: Applause Internal Team
Bug source: Exploratory - Significant User Experience Deterioration
Device used: macOS chrome
App Component: Money Requests

Action Performed:

1. Create a workspace with USD currency
2. Create expense in the workspace chat
3. Submit it > Approve it
4. Click pay dropdown if it is your first time paying with Mark as paid > Click on Mark as paid
5. Create new expense in the same workspace chat > Submit > Approve
6. Click on Mark as paid dropdown button
7. Click Pay with business account
8. Close the RHP
9. Click the Mark as paid button without clicking the dropdown

Expected Result:

The request should be marked as paid

Actual Result:

Add bank account page is opened

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Video.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022078168568519698197
• Upwork Job ID: 2078168568519698197
• Last Price Increase: 2026-07-17

Issue Owner

Current Issue Owner: @mallenexpensify

[MelvinBot]

Proposal

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

After opening the payment dropdown and choosing Pay with business account (then closing the add-bank RHP without finishing), the main split button still reads Mark as paid but pressing it re-opens the Add bank account page instead of marking the expense as paid. The button's label and its action are out of sync.

What is the root cause of that problem?

ButtonWithDropdownMenu executes the last option the user selected in the dropdown (tracked in internal selectedItemIndex state), while the main button's label is a separate customText value. Selecting "Pay with business account" persists the business-bank-account option as the sticky default, but the label keeps showing "Mark as paid" — so the next main-button press runs the business-account (VBBA) KYC flow and re-opens the add-bank page.

The specific defect: the BUSINESS_BANK_ACCOUNT payment-method option is missing the shouldUpdateSelectedIndex: false flag that ELSEWHERE has, so choosing it wrongly makes it the persisted default action.

Evidence / mechanism

1. The main button always displays customText, not the selected option's text — ButtonWithDropdownMenu/index.tsx:237 / :247. customText defaults to "Mark as paid" (iou.settlePayment) — SettlementButton/index.tsx:608.
2. But the main button's action uses the internally-stored selected option — selectedItem = options.at(selectedItemIndex) → handlePress → onPress(event, selectedItem.value).
3. Picking an option in the dropdown persists it via setSelectedItemIndex(index) unless the option sets shouldUpdateSelectedIndex: false — ButtonWithDropdownMenu/index.tsx:351-367.
4. The business-bank-account option (SettlementButtonUtils.ts:23-28) has no shouldUpdateSelectedIndex: false, whereas ELSEWHERE explicitly sets it (:33) precisely so "pay elsewhere" doesn't become the sticky default. This fallback option is what gets pushed when no bank account is set up yet (SettlementButton/index.tsx:331).
5. Result: the VBBA option sticks as the default; the next main-button press re-triggers the KYC/add-bank flow while the label still says "Mark as paid".

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

Add shouldUpdateSelectedIndex: false to the BUSINESS_BANK_ACCOUNT payment-method definition in SettlementButtonUtils.ts:23-28, mirroring ELSEWHERE. A not-yet-configured business account then still opens the add-bank flow when explicitly chosen from the dropdown, but never becomes the sticky main-button action — keeping the label and action aligned.

Verify this doesn't regress the intended one-tap-pay default for an already-configured business account (those options are built separately at SettlementButton/index.tsx ~L333-354 and use their own onSelected).

What alternative solutions did you explore? (Optional)

Make ButtonWithDropdownMenu act on the option matching customText/defaultSelectedIndex when customText is set, so label and action can never diverge. This is more general but riskier and touches a shared component, so it's not preferred for this bug.

Edge case to confirm during implementation

If a business account exists but isn't valid for this currency (businessBankAccountOptionList non-empty), a different branch runs and the sticky-default theory may not apply the same way — worth a quick check that lastPaymentMethod/defaultSelectedIndex don't independently reselect the VBBA option after the first partial selection.

Related issues

• [Due for payment 2026-08-29] [$250] Cannot Pay reports in bulk, only Mark as Paid even though they have VBA connected #95832 — "Cannot Pay reports in bulk, only Mark as Paid even though they have VBA connected" (also touches VBBA vs Mark-as-paid button behavior; likely distinct but same area).

---

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

[melvin-bot]

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

[wildan-m]

Proposal

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

On an expense report, after the user opens the pay dropdown and selects "Pay with business account" while no business bank account is set up, the Add Bank Account RHP opens (as expected). After the user closes that RHP without finishing setup, the main "Mark as paid" button at the top of the report still reads "Mark as paid" — but clicking it routes the user back to the Add Bank Account page instead of completing a Mark-as-paid (Pay Elsewhere) payment.

What is the root cause of that problem?

The pay button is a split button rendered by SettlementButton (which wraps ButtonWithDropdownMenu). It keeps two pieces of state that are supposed to stay in sync:

• The label of the main button (customText), which is derived from lastPaymentMethod (the user's last successfully completed payment method).
• The action of the main button, which is selectedItem.value — internally tracked inside ButtonWithDropdownMenu as selectedItemIndex.

These two are intended to be kept in sync by the defaultSelectedIndex → selectedItemIndex effect — whenever lastPaymentMethod changes, defaultSelectedIndex is recomputed and a useEffect syncs the internal index:

App/src/components/ButtonWithDropdownMenu/index.tsx

Lines 91 to 93 in f5ec733

	useEffect(() => {
	setSelectedItemIndex(defaultSelectedIndex);
	}, [defaultSelectedIndex]);

There is also a separate path: when the user picks an option from the dropdown, the dropdown unconditionally advances its own selectedItemIndex to the picked option (unless that option explicitly sets shouldUpdateSelectedIndex: false):

App/src/components/ButtonWithDropdownMenu/index.tsx

Lines 294 to 313 in f5ec733

	menuItems={options.map((item, index) => ({
	...item,
	onSelected: item.onSelected
	? () => {
	item.onSelected?.();
	if (item.shouldUpdateSelectedIndex) {
	setSelectedItemIndex(index);
	}
	}
	: () => {
	onOptionSelected?.(item);
	if (item.shouldUpdateSelectedIndex === false) {
	return;
	}
	setSelectedItemIndex(index);
	},
	shouldCallAfterModalHide: true,
	subMenuItems: item.subMenuItems?.map((subItem) => ({...subItem, shouldCallAfterModalHide: true})),
	}))}

The "Pay Elsewhere" option correctly opts out of this advance with shouldUpdateSelectedIndex: false, but the "Pay with business account" entry in useSettlementButtonPaymentMethods does not:

App/src/libs/SettlementButtonUtils.ts

Lines 112 to 125 in f5ec733

	[CONST.PAYMENT_METHODS.BUSINESS_BANK_ACCOUNT]: {
	text: translate('iou.settleBusiness', ''),
	icon: icons.Building,
	value: CONST.PAYMENT_METHODS.BUSINESS_BANK_ACCOUNT,
	key: CONST.PAYMENT_METHODS.BUSINESS_BANK_ACCOUNT,
	},
	[CONST.IOU.PAYMENT_TYPE.ELSEWHERE]: {
	text: translate('iou.payElsewhere', ''),
	icon: icons.CheckCircle,
	value: CONST.IOU.PAYMENT_TYPE.ELSEWHERE,
	shouldUpdateSelectedIndex: false,
	key: CONST.IOU.PAYMENT_TYPE.ELSEWHERE,
	},
	};

That is the bug. Picking "Pay with business account" from the dropdown for a report whose policy has no business bank does not actually complete a payment — it only triggers a KYC flow that routes the user to the Add Bank Account RHP. Because the option lacks shouldUpdateSelectedIndex: false, the dropdown still advances the main button's internal selected index to the business-bank entry. When the user closes the RHP without finishing KYC, lastPaymentMethod was never written (no payment succeeded), so customText keeps reading "Mark as paid", and defaultSelectedIndex does not change — which means the useEffect at lines 91-93 does not run and the stale internal index from the dropdown selection sticks. The next click on the main button reads selectedItem.value = BUSINESS_BANK_ACCOUNT and goes through handlePaymentSelection → selectPaymentMethod → triggerKYCFlow, which sends the user to the Add Bank Account page even though the visible label is "Mark as paid".

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

In src/libs/SettlementButtonUtils.ts, the entries in useSettlementButtonPaymentMethods for BUSINESS_BANK_ACCOUNT and PERSONAL_BANK_ACCOUNT should set shouldUpdateSelectedIndex: false, matching how the ELSEWHERE (Pay elsewhere / Mark as paid) entry already opts out. The reason is the same in both cases: picking either bank-account option from the dropdown does not on its own commit a payment; depending on the user's setup it can land them in a KYC / Add Bank flow that they may abandon. The split button's "selected index" should only move when a payment actually completes — which is what happens already through the defaultSelectedIndex recompute (it reads lastPaymentMethod, which is updated by the successful-payment action), with the useEffect at ButtonWithDropdownMenu/index.tsx lines 91-93 syncing the internal selectedItemIndex to that new default.

This way:

• Successful payments still update the main button's preferred action — via lastPaymentMethod → defaultSelectedIndex → the existing useEffect sync. No behavior is lost for the happy path.
• Abandoned KYC flows from the bank-account dropdown options no longer leave the main button pointing at an action that contradicts its label. The user keeps seeing "Mark as paid" and clicking the main button keeps doing Mark-as-paid (Pay Elsewhere), until they actually complete a different payment.

No other call site needs to change. SettlementButton reads the entry via paymentMethods[CONST.PAYMENT_METHODS.BUSINESS_BANK_ACCOUNT] and pushes it directly into paymentButtonOptions:

App/src/components/SettlementButton/index.tsx

Lines 320 to 322 in f5ec733

	if (shouldShowBusinessBankAccountOptions) {
	if (businessBankAccountOptionList.length === 0) {
	buttonOptions.push(paymentMethods[CONST.PAYMENT_METHODS.BUSINESS_BANK_ACCOUNT]);

The exact same fix path applies for PERSONAL_BANK_ACCOUNT (used for the IOU / personal-bank dropdown variant), since it is rendered through the same dropdown mechanism and can equally trigger a KYC flow the user can dismiss:

App/src/components/SettlementButton/index.tsx

Lines 302 to 316 in f5ec733

	if (canUseWallet) {
	if (personalBankAccountList.length && canUsePersonalBankAccount) {
	buttonOptions.push({
	text: translate('iou.settleWallet', ''),
	value: CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT,
	icon: icons.Wallet,
	});
	} else if (canUsePersonalBankAccount) {
	buttonOptions.push(paymentMethods[CONST.PAYMENT_METHODS.PERSONAL_BANK_ACCOUNT]);
	}
	if (activeAdminPolicies.length === 0 && !isPersonalOnlyOption) {
	buttonOptions.push(paymentMethods[CONST.PAYMENT_METHODS.BUSINESS_BANK_ACCOUNT]);
	}
	}

Compare branch: https://github.com/Expensify/App/compare/main...wildan-m:App:wildan/90524-settlement-button-stale-index?expand=1

What alternative solutions did you explore? (Optional)

Resetting selectedItemIndex in ButtonWithDropdownMenu whenever the popover closes was considered, but that would change the dropdown's semantics for all consumers and would also clobber legitimate, successful selections in the moment between dropdown close and lastPaymentMethod propagating. Gating the per-option advance in ButtonWithDropdownMenu so it only fires when no onSelected triggers a navigation is hard to express generically — the component cannot know whether the consumer's onOptionSelected will navigate away or finish the action. Marking specific options as "not committing" at the option-definition site, which is what ELSEWHERE already does, is the localized fix that matches the existing pattern.