Now multiCombo Languages will show human readable languages instead of ISO codes (#11699)

* Now multiCombo Languages will show human readable languages

* Exposed a function to get all the languages we have

* Now the language fields will have all the languages and proper chip styling

* others will be localized now, codes which are unknown will be omitted, and sorting will be done on the basis of local language

* Language codes not known by iD will appear as monospaced font including others

* Update CHANGELOG.md

---------

Co-authored-by: Minh Nguyễn <mxn@1ec5.org>

Author: Razen04

CHANGELOG.md

@@ -45,6 +45,7 @@ _Breaking developer changes, which may affect downstream projects or sites that
 #### :bug: Bugfixes
 * Fix some gpx/geojson properties not visible, such as numbers or complex data structures ([#11636], thanks [@k-yle])
 #### :earth_asia: Localization
+* The Languages field shows language names in your preferred language. ([#11699], thanks [@Razen04])
 #### :hourglass: Performance
 #### :mortar_board: Walkthrough / Help
 #### :hammer: Development
@@ -53,6 +54,8 @@ _Breaking developer changes, which may affect downstream projects or sites that
 
 [#11522]: https://github.com/openstreetmap/iD/issues/11522
 [#11636]: https://github.com/openstreetmap/iD/pull/11636
+[#11699]: https://github.com/openstreetmap/iD/pull/11699
+[@Razen04]: https://github.com/Razen04
 
 # v2.37.3
 ##### 2025-10-31

modules/core/localizer.js

@@ -61,6 +61,7 @@ export function coreLocalizer() {
     localizer.usesMetric = () => _usesMetric;
     localizer.languageNames = () => _languageNames;
     localizer.scriptNames = () => _scriptNames;
+    localizer.languages = () => _dataLanguages; // Expose all the languages supported
 
 
     // The client app may want to manually set the locale, regardless of the

modules/ui/fields/combo.js

@@ -4,7 +4,7 @@ import { drag as d3_drag } from 'd3-drag';
 import * as countryCoder from '@rapideditor/country-coder';
 
 import { fileFetcher } from '../../core/file_fetcher';
-import { t } from '../../core/localizer';
+import { localizer, t } from '../../core/localizer';
 import { services } from '../../services';
 import { uiCombobox } from '../combobox';
 import { svgIcon } from '../../svg/icon';
@@ -114,6 +114,14 @@ export function uiFieldCombo(field, context) {
     // (for multiCombo, tval should be the key suffix, not the entire key)
     function displayValue(tval) {
         tval = tval || '';
+        // Issue #11652
+        // Ignore language: key and when tval is not others
+        if (field.key === 'language:' && tval !== 'others'){
+          let langName = localizer.languageName(tval);
+          if (langName) {
+            return langName;
+          }
+        }
 
         var stringsField = field.resolveReference('stringsCrossReference');
         const labelId = getLabelId(stringsField, tval);
@@ -134,6 +142,13 @@ export function uiFieldCombo(field, context) {
     function renderValue(tval) {
         tval = tval || '';
 
+        // Issue #11652
+        // Ignore language: key and when tval is not others
+        if (field.key === 'language:' && tval !== 'others'){
+          let langName = localizer.languageName(tval);
+          if (langName) return selection => selection.text(langName);
+        }
+
         var stringsField = field.resolveReference('stringsCrossReference');
         const labelId = getLabelId(stringsField, tval);
         if (stringsField.hasTextForStringId(labelId)) {
@@ -178,6 +193,45 @@ export function uiFieldCombo(field, context) {
 
     function getOptions(allOptions) {
         var stringsField = field.resolveReference('stringsCrossReference');
+        // Get dropdown list for language: key via localizer instead of taginfo
+        if (field.key === 'language:') {
+          let codes = Object.keys(localizer.languages());
+
+          let options = codes.map((c) => {
+            let name = localizer.languageName(c);
+
+            // Omit names which are null or equal to the code itself
+            if (!name || name === c) return null;
+            return {
+              key: c,
+              value: name,
+              title: name,
+              display: selection => selection.text(name)
+            };
+          }).filter(Boolean);
+
+          const localeCode = localizer.localeCode();
+
+          options.sort((a, b) => {
+            return a.value.localeCompare(b.value, localeCode);
+          });
+
+          const v = 'others';
+          const labelId = getLabelId(stringsField, v);
+
+          // inserting others because it does not come via _dataLanguages
+          options.push({
+            key: v,
+            value: stringsField.t(labelId, { default: v }),
+            title: stringsField.t(`options.${v}.description`, { default: v }),
+            display: addComboboxIcons(stringsField.t.append(labelId, { default: v }), v),
+            klass: stringsField.hasTextForStringId(labelId) ? '' : 'raw-option'
+          });
+
+
+          return options;
+        }
+
         if (!(field.options || stringsField.options)) return [];
 
         let options;
@@ -228,6 +282,9 @@ export function uiFieldCombo(field, context) {
         var queryFilter = d => d.value.toLowerCase().includes(q.toLowerCase()) || d.key.toLowerCase().includes(q.toLowerCase());
         if (hasStaticValues()) {
             setStaticValues(callback, queryFilter);
+
+            // If it is language field, we don't need to request for values, we get it from getOptions
+            if (field.key === 'language:') return;
         }
 
         var stringsField = field.resolveReference('stringsCrossReference');
@@ -293,8 +350,8 @@ export function uiFieldCombo(field, context) {
                     key: v,
                     value: label,
                     title: stringsField.t(`options.${v}.description`, { default:
-                        isLocalizable ? v : (d.title !== label ? d.title : '') }),
-                    display: addComboboxIcons(stringsField.t.append(labelId, { default: v }), v),
+                        isLocalizable ? label : (d.title !== label ? d.title : '') }),
+                    display: addComboboxIcons(stringsField.t.append(labelId, { default: label }), v),
                     klass: isLocalizable ? '' : 'raw-option'
                 };
             });
@@ -716,6 +773,8 @@ export function uiFieldCombo(field, context) {
                 .classed('raw-value', function(d) {
                     var k = d.key;
                     if (_isMulti) k = k.replace(field.key, '');
+                    // Ignore the raw-value class for key language:
+                    if (field.key === 'language:' && localizer.languageName(k) !== k) return false;
                     return !stringsField.hasTextForStringId('options.' + k);
                 })
                 .classed('draggable', allowDragAndDrop)