[Due for payment 2026-01-28] [$250] Missing background highlight in `Authorized payer` page

[m-natarajan]

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.2.99-4
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: @daledah
Slack conversation (hyperlinked to channel name): #Expensify Bugs

Action Performed:

1. Go to the workspace
2. Go to Workflows page
3. Then add the bank account
4. Complete the flow
5. Choose the Payer session

Expected Result:

Selected item has highlighted background

Actual Result:

The selected item is missing background highlight.

Workaround:

Unknown

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

Recording.2186.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022011210424108204885
• Upwork Job ID: 2011210424108204885
• Last Price Increase: 2026-01-13
• Automatic offers:
• daledah | Contributor | 110110360

Issue Owner

Current Issue Owner: @JmillsExpensify

[melvin-bot]

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

[daledah]

Proposal

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

Missing background highlight in Authorized payer page

What is the root cause of that problem?

We are missing the initiallyFocusedOptionKey in this SelectionList

App/src/pages/workspace/workflows/WorkspaceWorkflowsPayerPage.tsx

Lines 208 to 219 in c0719ea

	<SelectionList
	sections={sections}
	textInputLabel={textInputLabel}
	textInputValue={searchTerm}
	onChangeText={setSearchTerm}
	headerMessage={headerMessage}
	ListItem={UserListItem}
	onSelectRow={setPolicyAuthorizedPayer}
	shouldSingleExecuteRowSelect
	showScrollIndicator
	addBottomSafeAreaPadding
	/>

The initiallyFocusedOptionKey tells the SelectionList which item to focus initially. When an item is focused (isFocused=true), the BaseListItem component applies the background highlight using StyleUtils.getItemBackgroundColorStyle()

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

We should pass the initiallyFocusedOptionKey prop to the SelectionList (Similarly with other selection lists)

    <SelectionList
        sections={sections}
        textInputLabel={textInputLabel}
        ...
        initiallyFocusedOptionKey={formattedAuthorizedPayer.at(0)?.keyForList}
    />

Optional: we can also pass the shouldUpdateFocusedIndex prop

App/src/pages/workspace/workflows/WorkspaceWorkflowsPayerPage.tsx

Lines 208 to 219 in c0719ea

	<SelectionList
	sections={sections}
	textInputLabel={textInputLabel}
	textInputValue={searchTerm}
	onChangeText={setSearchTerm}
	headerMessage={headerMessage}
	ListItem={UserListItem}
	onSelectRow={setPolicyAuthorizedPayer}
	shouldSingleExecuteRowSelect
	showScrollIndicator
	addBottomSafeAreaPadding
	/>

What alternative solutions did you explore? (Optional)

[annaweber830]

Proposal

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

On the Authorized payer selection screen, the currently selected payer does not show the expected highlighted background (it looks unselected), even though it is the active choice.

What is the root cause of that problem?

The selected-row background styling is only applied when a row is focused. In BaseListItem, the background style is gated behind isFocused, so a row that is selected (item.isSelected = true) but not focused does not receive the selected background color.

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

Update the shared list row container (BaseListItem) so it applies the background style whenever shouldHighlightSelectedItem is true and the item is selected/focused, rather than only when the row is focused. This ensures item.isSelected consistently produces the selected background highlight across selection lists, including the Authorized payer list.

App/src/components/SelectionList/ListItem/BaseListItem.tsx

Lines 121 to 126 in 3bf7f14

	style={[
	pressableStyle,
	isFocused &&
	shouldHighlightSelectedItem &&
	StyleUtils.getItemBackgroundColorStyle(!!item.isSelected, !!isFocused, !!item.isDisabled, theme.activeComponentBG, theme.hoverComponentBG),
	]}

style={[
                    pressableStyle,
                    shouldHighlightSelectedItem &&
                        StyleUtils.getItemBackgroundColorStyle(!!item.isSelected, !!isFocused, !!item.isDisabled, theme.activeComponentBG, theme.hoverComponentBG),
                ]}

App/src/components/SelectionList/ListItem/BaseListItem.tsx

Lines 136 to 141 in 3bf7f14

	style={[
	wrapperStyle,
	isFocused &&
	shouldHighlightSelectedItem &&
	StyleUtils.getItemBackgroundColorStyle(!!item.isSelected, !!isFocused, !!item.isDisabled, theme.activeComponentBG, theme.hoverComponentBG),
	]}

style={[
                        wrapperStyle,
                        shouldHighlightSelectedItem &&
                            StyleUtils.getItemBackgroundColorStyle(!!item.isSelected, !!isFocused, !!item.isDisabled, theme.activeComponentBG, theme.hoverComponentBG),
                    ]}

App/src/components/SelectionListWithSections/BaseListItem.tsx

Lines 119 to 124 in 3bf7f14

	style={[
	pressableStyle,
	isFocused &&
	shouldHighlightSelectedItem &&
	StyleUtils.getItemBackgroundColorStyle(!!item.isSelected, !!isFocused, !!item.isDisabled, theme.activeComponentBG, theme.hoverComponentBG),
	]}

style={[
                    pressableStyle,
                    shouldHighlightSelectedItem &&
                        StyleUtils.getItemBackgroundColorStyle(!!item.isSelected, !!isFocused, !!item.isDisabled, theme.activeComponentBG, theme.hoverComponentBG),
                ]}

App/src/components/SelectionListWithSections/BaseListItem.tsx

Lines 134 to 139 in 3bf7f14

	style={[
	wrapperStyle,
	isFocused &&
	shouldHighlightSelectedItem &&
	StyleUtils.getItemBackgroundColorStyle(!!item.isSelected, !!isFocused, !!item.isDisabled, theme.activeComponentBG, theme.hoverComponentBG),
	]}

style={[
                        wrapperStyle,
                        shouldHighlightSelectedItem &&
                            StyleUtils.getItemBackgroundColorStyle(!!item.isSelected, !!isFocused, !!item.isDisabled, theme.activeComponentBG, theme.hoverComponentBG),
                    ]}

What alternative solutions did you explore? (Optional)

Passing initiallyFocusedOptionKey to the payer SelectionList so the selected row becomes focused initially. This would be a workaround (and can introduce unintended focus/UX side effects), and it wouldn’t guarantee correct highlighting when selection changes, so it’s not preferred.

[melvin-bot]

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

[JmillsExpensify]

Opened it up

[melvin-bot]

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

[eh2077]

@daledah 's proposal looks good!

🎀👀🎀 C+ reviewed