Merge branch 'nontech-fix_wikidata_field_display' into develop

CHANGELOG.md

@@ -44,9 +44,11 @@ _Breaking developer changes, which may affect downstream projects or sites that
 #### :white_check_mark: Validation
 #### :bug: Bugfixes
 * When typing an invalid unit into the Speed Limit or Max Height field, revert to the previous unit ([#9110], thanks [@1ec5])
+* Fix wikidata field displaying `[object Object]` instead of item labels after wikibase API change ([#9067])
 #### :rocket: Presets
 #### :hammer: Development
 
+[#9067]: https://github.com/openstreetmap/iD/issues/9067
 [#9110]: https://github.com/openstreetmap/iD/issues/9110
 
 

modules/presets/field.js

@@ -22,6 +22,7 @@ export function presetField(fieldID, field) {
 
   _this.t = (scope, options) => t(`_tagging.presets.fields.${fieldID}.${scope}`, options);
   _this.t.html = (scope, options) => t.html(`_tagging.presets.fields.${fieldID}.${scope}`, options);
+  _this.t.append = (scope, options) => t.append(`_tagging.presets.fields.${fieldID}.${scope}`, options);
   _this.hasTextForStringId = (scope) => localizer.hasTextForStringId(`_tagging.presets.fields.${fieldID}.${scope}`);
 
   _this.title = () => _this.overrideLabel || _this.t('label', { 'default': fieldID });

modules/ui/combobox.js

@@ -7,7 +7,8 @@ import { utilGetSetValue, utilRebind, utilTriggerEvent } from '../util';
 // It is keyed on the `value` of the entry. Data should be an array of objects like:
 //   [{
 //       value:   'string value',  // required
-//       display: 'label html'     // optional
+//       display: 'label function' // optional, if present will be called with d3 selection
+//                                              to modify/append, see localizer's t.append
 //       title:   'hover text'     // optional
 //       terms:   ['search terms'] // optional
 //   }, ...]
@@ -386,7 +387,13 @@ export function uiCombobox(context, klass) {
                     return 'combobox-option ' + (d.klass || '');
                 })
                 .attr('title', function(d) { return d.title; })
-                .html(function(d) { return d.display || d.value; })
+                .each(function(d) {
+                    if (d.display) {
+                        d.display(d3_select(this));
+                    } else {
+                        d3_select(this).text(d.value);
+                    }
+                })
                 .on('mouseenter', _mouseEnterHandler)
                 .on('mouseleave', _mouseLeaveHandler)
                 .merge(options)

modules/ui/fields/combo.js

@@ -140,7 +140,7 @@ export function uiFieldCombo(field, context) {
                 key: v,
                 value: field.t('options.' + v, { default: v }),
                 title: v,
-                display: field.t.html('options.' + v, { default: v }),
+                display: field.t.append('options.' + v, { default: v }),
                 klass: field.hasTextForStringId('options.' + v) ? '' : 'raw-option'
             };
         });
@@ -206,7 +206,7 @@ export function uiFieldCombo(field, context) {
                 return {
                     key: k,
                     value: label,
-                    display: field.t.html('options.' + k, { default: k }),
+                    display: field.t.append('options.' + k, { default: k }),
                     title: d.title || label,
                     klass: field.hasTextForStringId('options.' + k) ? '' : 'raw-option'
                 };

modules/ui/fields/wikidata.js

@@ -1,21 +1,11 @@
 import { dispatch as d3_dispatch } from 'd3-dispatch';
-
-import {
-    select as d3_select
-} from 'd3-selection';
-
-import { uiCombobox } from '../combobox';
+import { select as d3_select } from 'd3-selection';
 
 import { actionChangeTags } from '../../actions/change_tags';
 import { services } from '../../services/index';
-
 import { svgIcon } from '../../svg/icon';
-import {
-    utilGetSetValue,
-    utilNoAuto,
-    utilRebind
-} from '../../util';
-
+import { utilGetSetValue, utilNoAuto, utilRebind } from '../../util';
+import { uiCombobox } from '../combobox';
 import { t } from '../../core/localizer';
 
 
@@ -31,16 +21,16 @@ export function uiFieldWikidata(field, context) {
     var _entityIDs = [];
 
     var _wikipediaKey = field.keys && field.keys.find(function(key) {
-            return key.includes('wikipedia');
-        }),
-        _hintKey = field.key === 'wikidata' ? 'name' : field.key.split(':')[0];
+        return key.includes('wikipedia');
+    });
+    var _hintKey = field.key === 'wikidata' ? 'name' : field.key.split(':')[0];
 
     var combobox = uiCombobox(context, 'combo-' + field.safeid)
         .caseSensitive(true)
         .minItems(1);
 
-    function wiki(selection) {
 
+    function wiki(selection) {
         _selection = selection;
 
         var wrap = selection.selectAll('.form-field-input-wrap')
@@ -144,7 +134,6 @@ export function uiFieldWikidata(field, context) {
     }
 
     function fetchWikidataItems(q, callback) {
-
         if (!q && _hintKey) {
             // other tags may be good search terms
             for (var i in _entityIDs) {
@@ -159,12 +148,20 @@ export function uiFieldWikidata(field, context) {
         wikidata.itemsForSearchQuery(q, function(err, data) {
             if (err) return;
 
-            for (var i in data) {
-                data[i].value = data[i].label + ' (' +  data[i].id + ')';
-                data[i].title = data[i].description;
-            }
+            var result = data.map(function (item) {
+                return {
+                    id: item.id,
+                    value: item.display.label.value + ' (' + item.id + ')',
+                    display: selection => selection.append('span')
+                        .attr('class', 'localized-text')
+                        .attr('lang', item.display.label.language)
+                        .text(item.display.label.value),
+                    title: item.display.description && item.display.description.value,
+                    terms: item.aliases
+                };
+            });
 
-            if (callback) callback(data);
+            if (callback) callback(result);
         });
     }