Add sort function in report field pages

src/pages/EditReportFieldDropdown.tsx

@@ -9,6 +9,7 @@ import type {ListItem} from '@components/SelectionList/types';
 import useDebouncedState from '@hooks/useDebouncedState';
 import useLocalize from '@hooks/useLocalize';
 import useTheme from '@hooks/useTheme';
+import localeCompare from '@libs/LocaleCompare';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
@@ -42,7 +43,7 @@ function EditReportFieldDropdownPage({onSubmit, fieldKey, fieldValue, fieldOptio
     const [searchValue, debouncedSearchValue, setSearchValue] = useDebouncedState('');
     const theme = useTheme();
     const {translate} = useLocalize();
-    const recentlyUsedOptions = useMemo(() => recentlyUsedReportFields?.[fieldKey] ?? [], [recentlyUsedReportFields, fieldKey]);
+    const recentlyUsedOptions = useMemo(() => recentlyUsedReportFields?.[fieldKey].sort((a, b) => localeCompare(a, b)) ?? [], [recentlyUsedReportFields, fieldKey]);
 
     const itemRightSideComponent = useCallback(
         (item: ListItem) => {
@@ -61,7 +62,7 @@ function EditReportFieldDropdownPage({onSubmit, fieldKey, fieldValue, fieldOptio
     );
 
     const [sections, headerMessage] = useMemo(() => {
-        const validFieldOptions = fieldOptions?.filter((option) => !!option);
+        const validFieldOptions = fieldOptions?.filter((option) => !!option).sort((a, b) => localeCompare(a, b));
 
         const {policyReportFieldOptions} = OptionsListUtils.getFilteredOptions(
             [],

src/pages/workspace/reportFields/InitialListValueSelector/ReportFieldsInitialListValuePicker.tsx

@@ -1,6 +1,7 @@
 import React, {useMemo} from 'react';
 import SelectionList from '@components/SelectionList';
 import RadioListItem from '@components/SelectionList/RadioListItem';
+import localeCompare from '@libs/LocaleCompare';
 
 type ReportFieldsInitialListValuePickerProps = {
     /** Options to select from if field is of type list */
@@ -22,6 +23,7 @@ function ReportFieldsInitialListValuePicker({listValues, disabledOptions, value,
             {
                 data: Object.values(listValues ?? {})
                     .filter((listValue, index) => !disabledOptions[index])
+                    .sort((a, b) => localeCompare(a, b))
                     .map((listValue) => ({
                         keyForList: listValue,
                         value: listValue,

src/pages/workspace/reportFields/ReportFieldsListValuesPage.tsx

@@ -22,6 +22,7 @@ import useThemeStyles from '@hooks/useThemeStyles';
 import {turnOffMobileSelectionMode} from '@libs/actions/MobileSelectionMode';
 import * as ReportField from '@libs/actions/Policy/ReportField';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
+import localeCompare from '@libs/LocaleCompare';
 import Navigation from '@libs/Navigation/Navigation';
 import * as PolicyUtils from '@libs/PolicyUtils';
 import * as ReportUtils from '@libs/ReportUtils';
@@ -84,22 +85,23 @@ function ReportFieldsListValuesPage({
     }, [formDraft?.disabledListValues, formDraft?.listValues, policy?.fieldList, reportFieldID]);
 
     const listValuesSections = useMemo(() => {
-        const data = listValues.map<ValueListItem>((value, index) => ({
-            value,
-            index,
-            text: value,
-            keyForList: value,
-            isSelected: selectedValues[value],
-            enabled: !disabledListValues[index] ?? true,
-            pendingAction: reportFieldID ? policy?.fieldList?.[ReportUtils.getReportFieldKey(reportFieldID)]?.pendingAction : null,
-            rightElement: (
-                <ListItemRightCaretWithLabel
-                    shouldShowCaret={false}
-                    labelText={disabledListValues[index] ? translate('workspace.common.disabled') : translate('workspace.common.enabled')}
-                />
-            ),
-        }));
-
+        const data = listValues
+            .map<ValueListItem>((value, index) => ({
+                value,
+                index,
+                text: value,
+                keyForList: value,
+                isSelected: selectedValues[value],
+                enabled: !disabledListValues[index] ?? true,
+                pendingAction: reportFieldID ? policy?.fieldList?.[ReportUtils.getReportFieldKey(reportFieldID)]?.pendingAction : null,
+                rightElement: (
+                    <ListItemRightCaretWithLabel
+                        shouldShowCaret={false}
+                        labelText={disabledListValues[index] ? translate('workspace.common.disabled') : translate('workspace.common.enabled')}
+                    />
+                ),
+            }))
+            .sort((a, b) => localeCompare(a.value, b.value));
         return [{data, isDisabled: false}];
     }, [disabledListValues, listValues, policy?.fieldList, reportFieldID, selectedValues, translate]);
 

src/pages/workspace/reportFields/WorkspaceReportFieldsPage.tsx

@@ -27,6 +27,7 @@ import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import {turnOffMobileSelectionMode} from '@libs/actions/MobileSelectionMode';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
+import localeCompare from '@libs/LocaleCompare';
 import Navigation from '@libs/Navigation/Navigation';
 import type {FullScreenNavigatorParamList} from '@libs/Navigation/types';
 import * as PolicyUtils from '@libs/PolicyUtils';
@@ -99,22 +100,24 @@ function WorkspaceReportFieldsPage({
 
         return [
             {
-                data: Object.values(filteredPolicyFieldList).map((reportField) => ({
-                    value: reportField.name,
-                    fieldID: reportField.fieldID,
-                    keyForList: String(reportField.fieldID),
-                    orderWeight: reportField.orderWeight,
-                    pendingAction: reportField.pendingAction,
-                    isSelected: selectedReportFields.find((selectedReportField) => selectedReportField.name === reportField.name) !== undefined,
-                    isDisabled: reportField.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE,
-                    text: reportField.name,
-                    rightElement: (
-                        <ListItemRightCaretWithLabel
-                            shouldShowCaret={false}
-                            labelText={Str.recapitalize(translate(WorkspaceReportFieldUtils.getReportFieldTypeTranslationKey(reportField.type)))}
-                        />
-                    ),
-                })),
+                data: Object.values(filteredPolicyFieldList)
+                    .sort((a, b) => localeCompare(a.name, b.name))
+                    .map((reportField) => ({
+                        value: reportField.name,
+                        fieldID: reportField.fieldID,
+                        keyForList: String(reportField.fieldID),
+                        orderWeight: reportField.orderWeight,
+                        pendingAction: reportField.pendingAction,
+                        isSelected: selectedReportFields.find((selectedReportField) => selectedReportField.name === reportField.name) !== undefined,
+                        isDisabled: reportField.pendingAction === CONST.RED_BRICK_ROAD_PENDING_ACTION.DELETE,
+                        text: reportField.name,
+                        rightElement: (
+                            <ListItemRightCaretWithLabel
+                                shouldShowCaret={false}
+                                labelText={Str.recapitalize(translate(WorkspaceReportFieldUtils.getReportFieldTypeTranslationKey(reportField.type)))}
+                            />
+                        ),
+                    })),
                 isDisabled: false,
             },
         ];