diff --git a/src/pages/EditReportFieldDropdown.tsx b/src/pages/EditReportFieldDropdown.tsx index 579d8e6c53ca..ba6828eca782 100644 --- a/src/pages/EditReportFieldDropdown.tsx +++ b/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(localeCompare) ?? [], [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(localeCompare); const {policyReportFieldOptions} = OptionsListUtils.getFilteredOptions( [], diff --git a/src/pages/workspace/reportFields/InitialListValueSelector/ReportFieldsInitialListValuePicker.tsx b/src/pages/workspace/reportFields/InitialListValueSelector/ReportFieldsInitialListValuePicker.tsx index 18f9f9d65259..4e6328bbc36b 100644 --- a/src/pages/workspace/reportFields/InitialListValueSelector/ReportFieldsInitialListValuePicker.tsx +++ b/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(localeCompare) .map((listValue) => ({ keyForList: listValue, value: listValue, diff --git a/src/pages/workspace/reportFields/ReportFieldsListValuesPage.tsx b/src/pages/workspace/reportFields/ReportFieldsListValuesPage.tsx index 8ad62fa8f59a..ac78f34ed1fb 100644 --- a/src/pages/workspace/reportFields/ReportFieldsListValuesPage.tsx +++ b/src/pages/workspace/reportFields/ReportFieldsListValuesPage.tsx @@ -23,6 +23,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'; @@ -85,22 +86,23 @@ function ReportFieldsListValuesPage({ }, [formDraft?.disabledListValues, formDraft?.listValues, policy?.fieldList, reportFieldID]); const listValuesSections = useMemo(() => { - const data = listValues.map((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: ( - - ), - })); - + const data = listValues + .map((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: ( + + ), + })) + .sort((a, b) => localeCompare(a.value, b.value)); return [{data, isDisabled: false}]; }, [disabledListValues, listValues, policy?.fieldList, reportFieldID, selectedValues, translate]); diff --git a/src/pages/workspace/reportFields/WorkspaceReportFieldsPage.tsx b/src/pages/workspace/reportFields/WorkspaceReportFieldsPage.tsx index 3646218d2952..9c77d123514a 100644 --- a/src/pages/workspace/reportFields/WorkspaceReportFieldsPage.tsx +++ b/src/pages/workspace/reportFields/WorkspaceReportFieldsPage.tsx @@ -28,6 +28,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'; @@ -100,22 +101,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: ( - - ), - })), + 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: ( + + ), + })), isDisabled: false, }, ];