[Due for payment 2025-11-26] [$125] Missing background highlight in the change approver 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.42-11
Reproducible in staging?: Y
Reproducible in production?: Y
If this was caught during regression testing, add the test name, ID and link from TestRail:
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): #Open source

Action Performed:

Precondition:
Admin invites member to the workspace.
The invited member is the approver.

As admin

1. Go to staging.new.expensify.com
2. Go to workspace chat
3. Create an expense in the workspace chat
4. Open the expense report
5. Click Submit
6. Click More > Change approver
7. Click Bypass approvers

Expected Result:

Selected item has a background highlight

Actual Result:

Missing background highlight in selected item

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
• MacOS: Desktop

Platforms Tested:

On which of our officially supported platforms was this issue tested:

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

Screenshots/Videos

Add any screenshot/video evidence

bug.mov

Recording.1871.mp4

View all open jobs on GitHub

Issue Owner

Current Issue Owner: @

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021991590608437927183
• Upwork Job ID: 1991590608437927183
• Last Price Increase: 2025-11-20

Issue Owner

Current Issue Owner: @MarioExpensify

[melvin-bot]

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

[melvin-bot]

Triggered auto assignment to @alexpensify (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 change approver page

What is the root cause of that problem?

We don't pass initiallyFocusedOptionKey prop in this SelectionList

App/src/pages/ReportChangeApproverPage.tsx

Lines 118 to 128 in 3eaff31

	<SelectionList
	ListItem={RadioListItem}
	sections={sections}
	isAlternateTextMultilineSupported
	onSelectRow={(option) => {
	if (!option.keyForList) {
	return;
	}
	setSelectedApproverType(option.keyForList);
	setHasError(false);
	}}

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

We should add the shouldUpdateFocusedIndex and initiallyFocusedOptionKey to this SelectionList

    <SelectionList
        ...
        shouldUpdateFocusedIndex
        initiallyFocusedOptionKey={selectedApproverType}
        ...
    />

App/src/pages/ReportChangeApproverPage.tsx

Lines 118 to 128 in 3eaff31

	<SelectionList
	ListItem={RadioListItem}
	sections={sections}
	isAlternateTextMultilineSupported
	onSelectRow={(option) => {
	if (!option.keyForList) {
	return;
	}
	setSelectedApproverType(option.keyForList);
	setHasError(false);
	}}

What alternative solutions did you explore? (Optional)

[ShridharGoel]

Proposal

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

The Change Approver modal should show which option is currently selected, but the green background disappears as soon as the radio item loses focus. This makes it hard to confirm whether Bypass approvers or Add approver is selected, especially after the user taps the confirm button or interacts with other controls.

What is the root cause of that problem?

The highlight style only ran when the row was focused, not when it was merely selected. In BaseListItem, the helper that sets the active background is guarded by isFocused, so the selected row renders without a background once focus moves away.

App/src/components/SelectionListWithSections/BaseListItem.tsx

Lines 104 to 119 in 3c7ec93

	isNested
	hoverDimmingValue={1}
	pressDimmingValue={item.isInteractive === false ? 1 : variables.pressDimValue}
	hoverStyle={[!item.isDisabled && item.isInteractive !== false && styles.hoveredComponentBG, hoverStyle]}
	dataSet={{[CONST.SELECTION_SCRAPER_HIDDEN_ELEMENT]: true, [CONST.INNER_BOX_SHADOW_ELEMENT]: shouldShowBlueBorderOnFocus}}
	onMouseDown={(e) => e.preventDefault()}
	id={keyForList ?? ''}
	style={[
	pressableStyle,
	isFocused && StyleUtils.getItemBackgroundColorStyle(!!item.isSelected, !!isFocused, !!item.isDisabled, theme.activeComponentBG, theme.hoverComponentBG),
	]}
	onFocus={onFocus}
	onMouseLeave={handleMouseLeave}
	tabIndex={item.tabIndex}
	wrapperStyle={pressableWrapperStyle}
	testID={testID}

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

Apply the highlight styles whenever the item is selected, regardless of focus, and update the accessibility state to report selection correctly. The same change needs to be done in both list item components that back the Change Approver screen.

style={[
    pressableStyle,
    StyleUtils.getItemBackgroundColorStyle(!!item.isSelected, !!isFocused, !!item.isDisabled, theme.activeComponentBG, theme.hoverComponentBG),
]}
...
<View
    testID={`${CONST.BASE_LIST_ITEM_TEST_ID}${item.keyForList}`}
    accessibilityState={{selected: !!item.isSelected}}
    style={[
        wrapperStyle,
        StyleUtils.getItemBackgroundColorStyle(!!item.isSelected, !!isFocused, !!item.isDisabled, theme.activeComponentBG, theme.hoverComponentBG),
    ]}
>

[zainAwan9175]

🚫 Duplicated proposal withdrawn by 🤖 ProposalPolice.

[github-actions]

⚠️ @zainAwan9175 Your proposal is a duplicate of an already existing proposal and has been automatically withdrawn to prevent spam. Please review the existing proposals before submitting a new one.

[IjaazA]

🚫 Duplicated proposal withdrawn by 🤖 ProposalPolice.

[github-actions]

⚠️ @IjaazA Your proposal is a duplicate of an already existing proposal and has been automatically withdrawn to prevent spam. Please review the existing proposals before submitting a new one.