fix: use localeCompare to sort in mention list

src/pages/home/report/ReportActionCompose/SuggestionMention.tsx

@@ -3,8 +3,8 @@ import lodashMapValues from 'lodash/mapValues';
 import lodashSortBy from 'lodash/sortBy';
 import type {ForwardedRef} from 'react';
 import React, {forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState} from 'react';
-import {useOnyx} from 'react-native-onyx';
 import type {OnyxCollection} from 'react-native-onyx';
+import {useOnyx} from 'react-native-onyx';
 import * as Expensicons from '@components/Icon/Expensicons';
 import type {Mention} from '@components/MentionSuggestions';
 import MentionSuggestions from '@components/MentionSuggestions';
@@ -14,6 +14,7 @@ import useCurrentReportID from '@hooks/useCurrentReportID';
 import useCurrentUserPersonalDetails from '@hooks/useCurrentUserPersonalDetails';
 import useDebounce from '@hooks/useDebounce';
 import useLocalize from '@hooks/useLocalize';
+import localeCompare from '@libs/LocaleCompare';
 import * as LoginUtils from '@libs/LoginUtils';
 import * as PersonalDetailsUtils from '@libs/PersonalDetailsUtils';
 import getPolicyEmployeeAccountIDs from '@libs/PolicyEmployeeListUtils';
@@ -56,6 +57,33 @@ type SuggestionPersonalDetailsList = Record<
     | null
 >;
 
+function getDisplayName(p: PersonalDetails) {
+    const displayNameFromAccountID = ReportUtils.getDisplayNameForParticipant(p.accountID);
+    if (!displayNameFromAccountID) {
+        return p.login?.length ? p.login : '';
+    }
+    return displayNameFromAccountID;
+}
+
+/**
+ * the comparison function used to determine which user will come first in the sorted list
+ * generally, smaller weight means will come first, and if the weight is the same, we'll sort based on displayName/login and accountID
+ */
+function compareUserInList(first: PersonalDetails & {weight: number}, second: PersonalDetails & {weight: number}) {
+    // first, we should sort by weight
+    if (first.weight !== second.weight) {
+        return first.weight - second.weight;
+    }
+
+    // next we sort by display name
+    const displayNameLoginOrder = localeCompare(getDisplayName(first), getDisplayName(second));
+    if (displayNameLoginOrder !== 0) {
+        return displayNameLoginOrder;
+    }
+    // then fallback on accountID as the final sorting criteria.
+    return first.accountID - second.accountID;
+}
+
 function SuggestionMention(
     {value, selection, setSelection, updateComment, isAutoSuggestionPickerLarge, measureParentContainerAndReportCursor, isComposerFocused, isGroupPolicyReport, policyID}: SuggestionProps,
     ref: ForwardedRef<SuggestionsRef>,
@@ -270,9 +298,11 @@ function SuggestionMention(
                 }
 
                 return true;
-            });
+            }) as Array<PersonalDetails & {weight: number}>;
+
+            // at this point we are sure that the details are not null, since empty user details have been filtered in the previous step
+            const sortedPersonalDetails = filteredPersonalDetails.sort(compareUserInList);
 
-            const sortedPersonalDetails = lodashSortBy(filteredPersonalDetails, ['weight', 'displayName', 'login']);
             sortedPersonalDetails.slice(0, CONST.AUTO_COMPLETE_SUGGESTER.MAX_AMOUNT_OF_SUGGESTIONS - suggestions.length).forEach((detail) => {
                 suggestions.push({
                     text: formatLoginPrivateDomain(PersonalDetailsUtils.getDisplayNameOrDefault(detail), detail?.login),
@@ -443,3 +473,5 @@ function SuggestionMention(
 SuggestionMention.displayName = 'SuggestionMention';
 
 export default forwardRef(SuggestionMention);
+
+export {compareUserInList};

tests/unit/compareUserInListTest.ts

@@ -0,0 +1,24 @@
+import {compareUserInList} from '@pages/home/report/ReportActionCompose/SuggestionMention';
+
+describe('compareUserInList', () => {
+    it('Should compare the weight if the weight is different', () => {
+        const first = {login: 'John Doe', weight: 1, accountID: 1};
+        const second = {login: 'Jane Doe', weight: 2, accountID: 2};
+        expect(compareUserInList(first, second)).toBe(-1);
+    });
+
+    it('Should compare the displayName if the weight is the same', () => {
+        const first = {login: 'águero', weight: 2, accountID: 3};
+        const second = {login: 'Bronn', weight: 2, accountID: 4};
+        const third = {login: 'Carol', weight: 2, accountID: 5};
+        expect(compareUserInList(first, second)).toBe(-1);
+        expect(compareUserInList(first, third)).toBe(-1);
+        expect(compareUserInList(second, third)).toBe(-1);
+    });
+
+    it('Should compare the accountID if both the weight and displayName are the same', () => {
+        const first = {login: 'águero', weight: 2, accountID: 6};
+        const second = {login: 'aguero', weight: 2, accountID: 7};
+        expect(compareUserInList(first, second)).toBe(-1);
+    });
+});