[$250] Background Highlight is missing in DomainAddAdminPage

[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.3.7-1
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: @PiyushChandra17 @mallenexpensify
Slack conversation (hyperlinked to channel name): #Open Source

Action Performed:

Precondition: WS has Domain name added && Login via email as their domain name

1. Open the New Expensify App
2. Tap on “Workspaces tab” > Tap on “Verify Domain Admin” > Add admin
3. On DomainAddAdminPage > Add few contacts > Observe the selected contact does not have background highlight

Expected Result:

The selected contact have background highlight

Actual Result:

The selected contact does not have 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.2277.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022014706663484361426
• Upwork Job ID: 2014706663484361426
• Last Price Increase: 2026-02-06
• Automatic offers:
• PiyushChandra17 | Contributor | 110376996

Issue Owner

Current Issue Owner: @NicMendonca

[melvin-bot]

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

[melvin-bot]

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

[melvin-bot]

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

[dmkt9]

Proposal

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

The selected contact does not have background highlight

What is the root cause of that problem?

In BaseDomainMembersPage we are missing the highlight mechanism for newly added

App/src/pages/domain/BaseDomainMembersPage.tsx

Line 67 in 6e6f87c

function BaseDomainMembersPage({

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

We can implement it similarly to what is currently done in WorkspaceMembersPage:

App/src/pages/workspace/WorkspaceMembersPage.tsx

Lines 507 to 517 in 6e6f87c

	useEffect(() => {
	if (!isFocused) {
	return;
	}
	if (isEmptyObject(invitedEmailsToAccountIDsDraft) || accountIDs === prevAccountIDs) {
	return;
	}
	const invitedEmails = Object.keys(invitedEmailsToAccountIDsDraft);
	selectionListRef.current?.scrollAndHighlightItem?.(invitedEmails);
	clearInviteDraft(route.params.policyID);
	}, [invitedEmailsToAccountIDsDraft, isFocused, accountIDs, prevAccountIDs, route.params.policyID]);

What alternative solutions did you explore? (Optional)

N/A

[samranahm]

🚨 Edited by proposal-police: This proposal was edited at 2026-01-26 14:05:12 UTC.

Proposal

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

When adding admins to a domain in the DomainAddAdminPage, selected contacts do not show a background highlight. This makes it unclear to users which contact they have selected.

What is the root cause of that problem?

The InviteMemberListItem component used in DomainAddAdminPage does not pass the shouldHighlightSelectedItem prop to its child BaseListItem component.

While the shouldHighlightSelectedItem prop is available through the component's props interface (inherited from CommonListItemProps), it's not being destructured in the function parameters and therefore not passed down to BaseListItem.

The BaseListItem component has logic to apply background highlighting when an item is selected, but this only works when shouldHighlightSelectedItem is set to true (which is the default value). However, since the prop is not being explicitly passed through in InviteMemberListItem, the highlighting functionality is not being triggered properly.

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

In InviteMemberListItem.tsx:

We should update sections

App/src/pages/domain/Admins/DomainAddAdminPage.tsx

Lines 84 to 106 in 728784e

	const sections: Sections[] = [];
	if (areOptionsInitialized) {
	if (currentlySelectedUser) {
	sections.push({
	title: undefined,
	data: [currentlySelectedUser],
	});
	}
	if (filteredOptions.length > 0) {
	sections.push({
	title: translate('common.contacts'),
	data: filteredOptions,
	});
	}
	if (availableOptions.userToInvite && currentlySelectedUser?.login !== availableOptions.userToInvite.login) {
	sections.push({
	title: undefined,
	data: [availableOptions.userToInvite],
	});
	}
	}

with data

const data: ListItem[] = [];
if (areOptionsInitialized) {
  if (currentlySelectedUser) {
      data.push({
          ...currentlySelectedUser,
          keyForList: String(currentlySelectedUser.accountID ?? currentlySelectedUser.reportID),
          isSelected: true,
      } as ListItem);
  }

  data.push(
      ...filteredOptions.map((option) => ({
          ...option,
          keyForList: String(option.accountID ?? option.reportID),
          isSelected: currentlySelectedUser?.accountID === option.accountID,
      })) as ListItem[],
  );

  if (availableOptions.userToInvite && currentlySelectedUser?.login !== availableOptions.userToInvite.login) {
      data.push({
          ...availableOptions.userToInvite,
          keyForList: String(availableOptions.userToInvite.accountID ?? availableOptions.userToInvite.reportID),
          isSelected: false,
      } as ListItem);
  }
}

and update SelectionList to use SingleSelectListItem similar to Reports > Filters > Type page

<SelectionList
    data={data}
    ListItem={SingleSelectListItem}
    textInputOptions={{
        label: translate('selectionList.nameEmailOrPhoneNumber'),
        value: searchTerm,
        onChangeText: setSearchTerm,
        headerMessage: headerMessage(),
    }}
    onSelectRow={(item: ListItem) => {
        const option = item as OptionData;
        setCurrentlySelectedUser({...option, isSelected: true});
    }}
    confirmButtonOptions={{
        onConfirm: inviteUser,
    }}

The exact implementation can be adjusted in PR review.

What alternative solutions did you explore? (Optional)

None. This is the straightforward solution that aligns with how other list item components in the codebase handle selection highlighting. The infrastructure for highlighting is already in place in BaseListItem, we just need to wire it through properly.

Results

[github-actions]

⚠️ @nkdengineer 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.

[PiyushChandra17]

🚨 Edited by proposal-police: This proposal was edited at 2026-01-26 15:04:04 UTC.

Proposal

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

Background highlight is missing in DomainAddAdminPage

What is the root cause of that problem?

In DomainAddAdminPage, shouldUpdateFocusedIndex and initiallyFocusedOptionKey prop is missing to SelectionList component here

App/src/pages/domain/Admins/DomainAddAdminPage.tsx

Lines 145 to 161 in 609f416

	<SelectionList
	sections={sections}
	headerMessage={headerMessage()}
	ListItem={InviteMemberListItem}
	textInputLabel={translate('selectionList.nameEmailOrPhoneNumber')}
	textInputValue={searchTerm}
	onChangeText={(value) => setSearchTerm(value)}
	onSelectRow={(option: OptionData) => toggleSelection(option)}
	onConfirm={inviteUser}
	showScrollIndicator
	showLoadingPlaceholder={!areOptionsInitialized || !didScreenTransitionEnd}
	shouldPreventDefaultFocusOnSelectRow={!canUseTouchScreen()}
	footerContent={footerContent}
	isLoadingNewOptions={!!isSearchingForReports}
	addBottomSafeAreaPadding
	onEndReached={onListEndReached}
	/>

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

1. Add shouldUpdateFocusedIndex prop to SelectionList > (main fix).
2. Optionally We should pass initiallyFocusedOptionKey to SelectionList as sections.at(0)?.data.find((item) => item.isSelected)?.keyForList
   Note: Just adding shouldUpdateFocusedIndex is enough to resolve this issue.
   Updated code:

<SelectionList
    ....
    shouldUpdateFocusedIndex
    ...
/>

3. As per the Newly Introduced styles for the Single Select List Items:

• Instead of using InviteMemberListItem, Replace this with SingleSelectListItem

• We should follow the same approach as we do in SearchAdvancedFiltersPage here
  

  App/src/pages/Search/SearchAdvancedFiltersPage/SearchFiltersTypePage.tsx

  Lines 72 to 77 in 87e6d66

  	<SelectionList
  	shouldSingleExecuteRowSelect
  	data={listData}
  	ListItem={SingleSelectListItem}
  	onSelectRow={updateSelectedItem}
  	/>

• Add shouldSingleExecuteRowSelect prop to SelectionList component

• Updated Code:

<SelectionList
      ....
      ListItem={SingleSelectListItem}
      shouldSingleExecuteRowSelect
      ....
  />

Note: We we hover over these list item, the rows gets a Background Highlight

What alternative solutions did you explore? (Optional)

n/A

Result