[$250] Copilot List Not Displayed in Alphabetical Order

[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-6
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: @Leeckhart
Slack conversation (hyperlinked to channel name): #Expensify Bugs

Action Performed:

1. Navigate to Account > Switch Accounts
2. Navigate to Accounts > Security
3. View the list of copilots accounts

Expected Result:

Copilots should be displayed in alphabetical order

Actual Result:

The copilot list appears unsorted / mixed, with no clear ordering.

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.2192.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~022013509847226648058
• Upwork Job ID: 2013509847226648058
• Last Price Increase: 2026-01-20

Issue Owner

Current Issue Owner: @ShridharGoel

[melvin-bot]

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

[nyomanjyotisa]

Proposal

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

Copilot List Not Displayed in Alphabetical Order

What is the root cause of that problem?

The copilot accounts list is not sorted before being displayed. In the AccountSwitcher component, the delegatorMenuItems are created by mapping over the delegators array, but there's no sorting applied to order them alphabetically

App/src/components/AccountSwitcher.tsx

Lines 156 to 172 in 25ad49c

	const delegatorMenuItems: PopoverMenuItem[] = delegators
	.filter(({email}) => email !== currentUserPersonalDetails.login)
	.map(({email, role}) => {
	const errorFields = account?.delegatedAccess?.errorFields ?? {};
	const error = getLatestError(errorFields?.connect?.[email]);
	const personalDetails = getPersonalDetailByEmail(email);
	return createBaseMenuItem(personalDetails, error, {
	badgeText: translate('delegate.role', {role}),
	onSelected: () => {
	if (isOffline) {
	close(() => setShouldShowOfflineModal(true));
	return;
	}
	connect({email, delegatedAccess: account?.delegatedAccess, credentials, session, activePolicyID});
	},
	});
	});

The list is simply filtered and mapped without any sorting, causing the copilot accounts to appear in whatever order they were received from the backend

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

Sort the delegatorMenuItems alphabetically by display name using localeCompare before returning them

        const delegatorMenuItems: PopoverMenuItem[] = delegators
            .filter(({email}) => email !== currentUserPersonalDetails.login)
            .map(({email, role}) => {
                const errorFields = account?.delegatedAccess?.errorFields ?? {};
                const error = getLatestError(errorFields?.connect?.[email]);
                const personalDetails = getPersonalDetailByEmail(email);
                return createBaseMenuItem(personalDetails, error, {
                    badgeText: translate('delegate.role', {role}),
                    onSelected: () => {
                        if (isOffline) {
                            close(() => setShouldShowOfflineModal(true));
                            return;
                        }
                        connect({email, delegatedAccess: account?.delegatedAccess, credentials, session, activePolicyID});
                    },
                });
            })
            .sort((a, b) => localeCompare(a.text ?? '', b.text ?? ''));

        return [currentUserMenuItem, ...delegatorMenuItems];

App/src/components/AccountSwitcher.tsx

Lines 156 to 174 in 25ad49c

	const delegatorMenuItems: PopoverMenuItem[] = delegators
	.filter(({email}) => email !== currentUserPersonalDetails.login)
	.map(({email, role}) => {
	const errorFields = account?.delegatedAccess?.errorFields ?? {};
	const error = getLatestError(errorFields?.connect?.[email]);
	const personalDetails = getPersonalDetailByEmail(email);
	return createBaseMenuItem(personalDetails, error, {
	badgeText: translate('delegate.role', {role}),
	onSelected: () => {
	if (isOffline) {
	close(() => setShouldShowOfflineModal(true));
	return;
	}
	connect({email, delegatedAccess: account?.delegatedAccess, credentials, session, activePolicyID});
	},
	});
	});
	return [currentUserMenuItem, ...delegatorMenuItems];

What alternative solutions did you explore? (Optional)

We could sort the delegators array before mapping

[ShridharGoel]

Proposal

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

The copilot list displayed in Account > Co-pilots and in the Account Switcher dropdown is not sorted alphabetically.

What is the root cause of that problem?

The copilot lists are built from account.delegatedAccess.delegates and account.delegatedAccess.delegators arrays without any sorting applied. The lists are rendered in whatever order they exist in the Onyx store, which is the order received from the backend.

In SecuritySettingsPage, the delegate and delegator menu items are created directly from the arrays without sorting:

App/src/pages/settings/Security/SecuritySettingsPage.tsx

Lines 227 to 275 in 8378ac5

	const delegateMenuItems: MenuItemProps[] = useMemo(
	() =>
	delegates
	.filter((d) => !d.optimisticAccountID)
	.map(({email, role, pendingAction, pendingFields}) => {
	const personalDetail = getPersonalDetailByEmail(email);
	const addDelegateErrors = errorFields?.addDelegate?.[email];
	const error = getLatestError(addDelegateErrors);
	const onPress = (e: GestureResponderEvent | KeyboardEvent) => {
	if (isEmptyObject(pendingAction)) {
	showPopoverMenu(e, {email, role});
	return;
	}
	if (!role) {
	Navigation.navigate(ROUTES.SETTINGS_DELEGATE_ROLE.getRoute(email));
	return;
	}
	if (pendingFields?.role && !pendingFields?.email) {
	Navigation.navigate(ROUTES.SETTINGS_UPDATE_DELEGATE_ROLE.getRoute(email, role));
	return;
	}
	Navigation.navigate(ROUTES.SETTINGS_DELEGATE_CONFIRM.getRoute(email, role));
	};
	const formattedEmail = formatPhoneNumber(email);
	return {
	title: personalDetail?.displayName ?? formattedEmail,
	description: personalDetail?.displayName ? formattedEmail : '',
	badgeText: translate('delegate.role', {role}),
	avatarID: personalDetail?.accountID ?? CONST.DEFAULT_NUMBER_ID,
	icon: personalDetail?.avatar ?? icons.FallbackAvatar,
	iconType: CONST.ICON_TYPE_AVATAR,
	numberOfLinesDescription: 1,
	wrapperStyle: [styles.sectionMenuItemTopDescription],
	iconRight: icons.ThreeDots,
	shouldShowRightIcon: true,
	pendingAction,
	shouldForceOpacity: !!pendingAction,
	onPendingActionDismiss: () => clearDelegateErrorsByField({email, fieldName: 'addDelegate', delegatedAccess: account?.delegatedAccess}),
	error,
	onPress,
	success: selectedEmail === email,
	};
	}),
	// eslint-disable-next-line react-hooks/exhaustive-deps
	[delegates, translate, styles, personalDetails, errorFields, windowWidth, selectedEmail, icons.FallbackAvatar, icons.ThreeDots],
	);

In AccountSwitcher, the delegator menu items are also created without sorting:

App/src/components/AccountSwitcher.tsx

Lines 156 to 172 in 8378ac5

	const delegatorMenuItems: PopoverMenuItem[] = delegators
	.filter(({email}) => email !== currentUserPersonalDetails.login)
	.map(({email, role}) => {
	const errorFields = account?.delegatedAccess?.errorFields ?? {};
	const error = getLatestError(errorFields?.connect?.[email]);
	const personalDetails = getPersonalDetailByEmail(email);
	return createBaseMenuItem(personalDetails, error, {
	badgeText: translate('delegate.role', {role}),
	onSelected: () => {
	if (isOffline) {
	close(() => setShouldShowOfflineModal(true));
	return;
	}
	connect({email, delegatedAccess: account?.delegatedAccess, credentials, session, activePolicyID});
	},
	});
	});

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

We should sort the copilot lists alphabetically using the existing sortAlphabetically utility from OptionsListUtils, which is the standard pattern used throughout the codebase for sorting user lists (e.g., workspace members, group chat participants).

Changes in SecuritySettingsPage:

1. Sort delegate menu items after mapping:

const delegateMenuItems: MenuItemProps[] = useMemo(
    () => {
        const menuItems = delegates
            .filter((d) => !d.optimisticAccountID)
            .map(({email, role, pendingAction, pendingFields}) => {
                // ... existing mapping logic ...
            });

        return sortAlphabetically(menuItems, 'title', localeCompare);
    },
    [delegates, translate, styles, personalDetails, errorFields, windowWidth, selectedEmail, icons.FallbackAvatar, icons.ThreeDots, localeCompare],
);

2. Sort delegator menu items after mapping:

 const delegatorMenuItems: MenuItemProps[] = useMemo(
     () => {
         const menuItems = delegators.map(({email, role}) => {
             // ... existing mapping logic ...
         });
 
         return sortAlphabetically(menuItems, 'title', localeCompare);
     },
     [delegators, styles, translate, personalDetails, icons.FallbackAvatar, localeCompare],
 );

Changes in AccountSwitcher:

1. Sort delegator menu items after mapping:

 const delegatorMenuItems: PopoverMenuItem[] = sortAlphabetically(
     delegators
         .filter(({email}) => email !== currentUserPersonalDetails.login)
         .map(({email, role}) => {
             // ... existing mapping logic ...
         }),
     'text',
     localeCompare,
 );

[melvin-bot]

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

[melvin-bot]

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