diff --git a/modules/ui/fields/localized.js b/modules/ui/fields/localized.js index 857a128cd..87780b201 100644 --- a/modules/ui/fields/localized.js +++ b/modules/ui/fields/localized.js @@ -21,11 +21,12 @@ export function localized(field, context) { input = selection.selectAll('.localized-main') .data([0]); - input.enter().append('input') + input = input.enter().append('input') .attr('type', 'text') .attr('id', 'preset-input-' + field.id) .attr('class', 'localized-main') - .attr('placeholder', field.placeholder()); + .attr('placeholder', field.placeholder()) + .merge(input); if (field.id === 'name') { var preset = context.presets().match(entity, context.graph()); @@ -42,14 +43,15 @@ export function localized(field, context) { var translateButton = selection.selectAll('.localized-add') .data([0]); - translateButton.enter() + translateButton = translateButton.enter() .append('button') .attr('class', 'button-input-action localized-add minor') .attr('tabindex', -1) .call(Icon('#icon-plus')) .call(tooltip() .title(t('translate.translate')) - .placement('left')); + .placement('left')) + .merge(translateButton); translateButton .on('click', addNew); @@ -57,8 +59,9 @@ export function localized(field, context) { localizedInputs = selection.selectAll('.localized-wrap') .data([0]); - localizedInputs.enter().append('div') - .attr('class', 'localized-wrap'); + localizedInputs = localizedInputs.enter().append('div') + .attr('class', 'localized-wrap') + .merge(localizedInputs); } function addNew() { diff --git a/modules/util/index.js b/modules/util/index.js index 92d641e8c..d0042c5fb 100644 --- a/modules/util/index.js +++ b/modules/util/index.js @@ -18,3 +18,4 @@ export { functor } from './util'; export { SessionMutex } from './session_mutex'; export { SuggestNames } from './suggest_names'; export { triggerEvent } from './trigger_event'; +export { getSetValue } from './get_set_value'; diff --git a/test/spec/ui/fields/localized.js b/test/spec/ui/fields/localized.js index 5d61d0e64..d7fddc3aa 100644 --- a/test/spec/ui/fields/localized.js +++ b/test/spec/ui/fields/localized.js @@ -10,8 +10,8 @@ describe('localized', function() { var localized = iD.ui.fields.localized(field, {}); selection.call(localized); happen.click(selection.selectAll('.localized-add').node()); - expect(selection.selectAll('.localized-lang').size()).to.equal(1); - expect(selection.selectAll('.localized-value').size()).to.equal(1); + expect(selection.selectAll('.localized-lang').nodes().length).to.equal(1); + expect(selection.selectAll('.localized-value').nodes().length).to.equal(1); }); it('doesn\'t create a tag when the value is empty', function() { @@ -23,7 +23,7 @@ describe('localized', function() { expect(tags).to.eql({}); }); - selection.selectAll('.localized-lang').value('Deutsch'); + iD.util.getSetValue(selection.selectAll('.localized-lang'), 'Deutsch'); happen.once(selection.selectAll('.localized-lang').node(), {type: 'change'}); happen.once(selection.selectAll('.localized-lang').node(), {type: 'blur'}); }); @@ -37,7 +37,7 @@ describe('localized', function() { expect(tags).to.eql({}); }); - selection.selectAll('.localized-value').value('Value'); + iD.util.getSetValue(selection.selectAll('.localized-value'), 'Value'); happen.once(selection.selectAll('.localized-value').node(), {type: 'change'}); happen.once(selection.selectAll('.localized-value').node(), {type: 'blur'}); }); @@ -47,14 +47,14 @@ describe('localized', function() { selection.call(localized); happen.click(selection.selectAll('.localized-add').node()); - selection.selectAll('.localized-lang').value('Deutsch'); + iD.util.getSetValue(selection.selectAll('.localized-lang'), 'Deutsch'); happen.once(selection.selectAll('.localized-lang').node(), {type: 'change'}); localized.on('change', function(tags) { expect(tags).to.eql({'name:de': 'Value'}); }); - selection.selectAll('.localized-value').value('Value'); + iD.util.getSetValue(selection.selectAll('.localized-value'), 'Value'); happen.once(selection.selectAll('.localized-value').node(), {type: 'change'}); }); @@ -63,14 +63,14 @@ describe('localized', function() { selection.call(localized); happen.click(selection.selectAll('.localized-add').node()); - selection.selectAll('.localized-value').value('Value'); + iD.util.getSetValue(selection.selectAll('.localized-value'), 'Value'); happen.once(selection.selectAll('.localized-value').node(), {type: 'change'}); localized.on('change', function(tags) { expect(tags).to.eql({'name:de': 'Value'}); }); - selection.selectAll('.localized-lang').value('Deutsch'); + iD.util.getSetValue(selection.selectAll('.localized-lang'), 'Deutsch'); happen.once(selection.selectAll('.localized-lang').node(), {type: 'change'}); }); @@ -85,7 +85,7 @@ describe('localized', function() { 'name:en': 'Value'}); }); - selection.selectAll('.localized-lang').value('English'); + iD.util.getSetValue(selection.selectAll('.localized-lang'), 'English'); happen.once(selection.selectAll('.localized-lang').node(), {type: 'change'}); }); @@ -107,7 +107,7 @@ describe('localized', function() { expect(tags).to.eql({'name:de': undefined}); }); - selection.selectAll('.localized-lang').value(''); + iD.util.getSetValue(selection.selectAll('.localized-lang'), ''); happen.once(selection.selectAll('.localized-lang').node(), {type: 'change'}); }); @@ -120,7 +120,7 @@ describe('localized', function() { expect(tags).to.eql({'name:de': undefined}); }); - selection.selectAll('.localized-value').value(''); + iD.util.getSetValue(selection.selectAll('.localized-value'), ''); happen.once(selection.selectAll('.localized-value').node(), {type: 'change'}); }); });