diff --git a/src/common/useLanguageSorting.ts b/src/common/useLanguageSorting.ts index 44c8927bd..d5969cf76 100644 --- a/src/common/useLanguageSorting.ts +++ b/src/common/useLanguageSorting.ts @@ -22,10 +22,12 @@ const useLanguageSorting = (options: MultiselectMenuOption[]) => { return userLangCode.some((code) => lang?.codes.includes(code)); }); - if (matchingIndex === -1) return options; + if (matchingIndex === -1) { + return [...options].sort((a, b) => a.label.localeCompare(b.label)); + } const matchingOption = options[matchingIndex]; - const otherOptions = options.filter((_, index) => index !== matchingIndex); + const otherOptions = options.filter((_, idx) => idx !== matchingIndex).sort((a, b) => a.label.localeCompare(b.label)); return [matchingOption, ...otherOptions]; }, [options, userLangCode, isLanguageDropdown]); diff --git a/src/routes/Settings/Player/usePlayerOptions.ts b/src/routes/Settings/Player/usePlayerOptions.ts index 982c5138e..edbce3d24 100644 --- a/src/routes/Settings/Player/usePlayerOptions.ts +++ b/src/routes/Settings/Player/usePlayerOptions.ts @@ -10,11 +10,10 @@ const usePlayerOptions = (profile: Profile) => { const { core } = useServices(); const platform = usePlatform(); - const languageOptions = useMemo(() => - Object.keys(LANGUAGES_NAMES).map((code) => ({ - value: code, - label: LANGUAGES_NAMES[code] - })), []); + const languageOptions = useMemo(() => Object.keys(LANGUAGES_NAMES).map((code) => ({ + value: code, + label: LANGUAGES_NAMES[code] + })), []); const { sortedOptions: sortedLanguageOptions } = useLanguageSorting(languageOptions);