diff --git a/modules/ui/fields/localized.js b/modules/ui/fields/localized.js index 7fcc11f01..6be23976f 100644 --- a/modules/ui/fields/localized.js +++ b/modules/ui/fields/localized.js @@ -10,7 +10,7 @@ import { services } from '../../services'; import { svgIcon } from '../../svg'; import { uiTooltip } from '../tooltip'; import { uiCombobox } from '../combobox'; -import { utilArrayUniq, utilEditDistance, utilGetSetValue, utilNoAuto, utilRebind } from '../../util'; +import { utilArrayUniq, utilEditDistance, utilGetSetValue, utilNoAuto, utilRebind, utilUniqueDomId } from '../../util'; var _languagesArray = []; @@ -493,12 +493,15 @@ export function uiFieldLocalized(field, context) { var entriesEnter = entries.enter() .append('div') .attr('class', 'entry') - .each(function() { + .each(function(_, index) { var wrap = d3_select(this); + var domId = utilUniqueDomId(index); + var label = wrap .append('label') - .attr('class', 'field-label'); + .attr('class', 'field-label') + .attr('for', domId); var text = label .append('span') @@ -536,6 +539,7 @@ export function uiFieldLocalized(field, context) { wrap .append('input') .attr('class', 'localized-lang') + .attr('id', domId) .attr('type', 'text') .attr('placeholder', t('translate.localized_translation_language')) .on('blur', changeLang) @@ -570,6 +574,10 @@ export function uiFieldLocalized(field, context) { entries.order(); + entries.classed('present', function(d) { + return d.lang && d.value; + }); + utilGetSetValue(entries.select('.localized-lang'), function(d) { return localizer.languageName(d.lang); }); diff --git a/modules/util/util.js b/modules/util/util.js index a33e1e62a..2d9ce61df 100644 --- a/modules/util/util.js +++ b/modules/util/util.js @@ -510,8 +510,8 @@ export function utilSafeClassName(str) { // Returns string based on `str` that is highly unlikely to collide with an id // used previously or that's present elsewhere in the document. Useful for preventing // browser-provided autofills or when embedding iD on pages with unknown elements. -export function utilUniqueDomId(str) { - return 'ideditor-' + utilSafeClassName(str) + '-' + new Date().getTime().toString(); +export function utilUniqueDomId(val) { + return 'ideditor-' + utilSafeClassName(val.toString()) + '-' + new Date().getTime().toString(); } export function utilUnicodeCharsCount(str) {