preserve order of options when fiel has also autosuggestions, fixes #12117

and render additional values from taginfo as raw-options only (e.g. when the field references another field for strings, but omits some options on purpose to disincentivize them)

Author: tyrasd

CHANGELOG.md

@@ -63,6 +63,7 @@ _Breaking developer changes, which may affect downstream projects or sites that
 #### :rocket: Presets
 * Standardize tooltips in combo boxes: always show (full) raw tag, don't duplicate the already rendered titles, and show descriptions from wiki/taginfo where available ([#12010], thanks [@tordans])
 * Use full width for the dropdown box for the values of the `access` field ([#12065])
+* Preserve the order of options when a combo field accepts both static options as well as autosuggestions from taginfo and display additional tag values from taginfo as raw-options only ([#12117])
 #### :hammer: Development
 * Replace `sinon` with `vitest`'s built in spy/mock library ([#12058])
 * Add type annotations to `context.js` module ([#11589], thanks [@k-yle])
@@ -82,6 +83,7 @@ _Breaking developer changes, which may affect downstream projects or sites that
 [#12070]: https://github.com/openstreetmap/iD/issues/12070
 [#12078]: https://github.com/openstreetmap/iD/issues/12078
 [#12110]: https://github.com/openstreetmap/iD/issues/12110
+[#12117]: https://github.com/openstreetmap/iD/issues/12117
 [#12120]: https://github.com/openstreetmap/iD/issues/12120
 [#12139]: https://github.com/openstreetmap/iD/pull/12139
 [#12178]: https://github.com/openstreetmap/iD/pull/12178

modules/ui/fields/combo.js

@@ -442,19 +442,28 @@ export function uiFieldCombo(field, context) {
                     d.value.toLowerCase().indexOf(_countryCode + ':') === 0);
             }
 
-            const additionalOptions = (field.options || stringsField.options || [])
-                .filter(v => !data.some(dv => dv.value === (_isMulti ? field.key + v : v)))
-                .map(v => ({ value: v }));
+            const staticOptions = getOptions();
 
             // hide the caret if there are no suggestions
-            _container.classed('empty-combobox', data.length === 0);
+            _container.classed('empty-combobox', data.length + staticOptions.length === 0);
 
-            _comboData = data.concat(additionalOptions).map(function(d) {
+            data = data.map(function(d) {
                 var v = d.value;
                 if (_isMulti) v = v.replace(field.key, '');
                 const labelId = getLabelId(stringsField, v);
-                var isLocalizable = stringsField.hasTextForStringId(labelId);
-                var label = stringsField.t(labelId, { default: v });
+                let isLocalizable;
+                let label;
+                let display;
+                if (hasStaticValues() && !staticOptions.find(option => option.key === v)) {
+                    // field has static options, but value is not one of them: include only as a raw option
+                    isLocalizable = false;
+                    label = v;
+                    display = selection => selection.append('span').text(v);
+                } else {
+                    isLocalizable = stringsField.hasTextForStringId(labelId);
+                    label = stringsField.t(labelId, { default: v });
+                    display = stringsField.t.append(labelId, { default: v });
+                }
 
                 // Only here is data for `taginfoDesc` present. We render it as `title`, when no `presetDesc` is given.
                 const presetDesc = presetDescription(v);
@@ -466,11 +475,22 @@ export function uiFieldCombo(field, context) {
                     value: label,
                     title: !presetDesc && taginfoDesc ? `${taginfoDesc}\n${formatTag(field.key, v, _isMulti)}` : formatTag(field.key, v, _isMulti),
                     description: presetDesc,
-                    display: addComboboxIcons(stringsField.t.append(labelId, { default: label }), v),
+                    display: addComboboxIcons(display, v),
                     klass: isLocalizable ? '' : 'raw-option'
                 };
             });
 
+            if (hasStaticValues()) {
+                _comboData = staticOptions.map(option =>
+                    // prefer taginfo entry, as those might have additional details like the taginfoDesc
+                    data.find(d => d.key === option.key) || option
+                ).concat(data.filter(d =>
+                    // append taginfo results that are not present in the static options at the end
+                    !staticOptions.some(option => d.key === option.key)));
+            } else {
+                _comboData = data;
+            }
+
             _comboData = _comboData.filter(queryFilter);
 
             if (!field.allowDuplicates) {