Fix raw tag editor data binding of key/value input fields

modules/ui/entity_editor.js

@@ -37,7 +37,6 @@ export function EntityEditor(context) {
         var header = selection.selectAll('.header')
             .data([0]);
 
-        // Enter
         var enter = header.enter()
             .append('div')
             .attr('class', 'header fillL cf');
@@ -45,6 +44,7 @@ export function EntityEditor(context) {
         enter
             .append('button')
             .attr('class', 'fl preset-reset preset-choose')
+            .on('click', function() { dispatch.call('choose', this, activePreset); })
             .append('span')
             .html('◄');
 
@@ -55,19 +55,13 @@ export function EntityEditor(context) {
             .call(Icon(modified ? '#icon-apply' : '#icon-close'));
 
         enter
-            .append('h3');
-
-        // Update
-        header
-            .merge(enter)
-            .select('h3')
+            .append('h3')
             .text(t('inspector.edit'));
 
 
         var body = selection.selectAll('.inspector-body')
             .data([0]);
 
-        // Enter
         enter = body.enter()
             .append('div')
             .attr('class', 'inspector-body');
@@ -150,6 +144,10 @@ export function EntityEditor(context) {
                 .entityID(id));
 
 
+        context.history()
+            .on('change.entity-editor', historyChanged);
+
+
         function historyChanged() {
             if (state === 'hide') return;
 
@@ -161,9 +159,6 @@ export function EntityEditor(context) {
             entityEditor.modified(base !== graph);
             entityEditor(selection);
         }
-
-        context.history()
-            .on('change.entity-editor', historyChanged);
     }
 
 

modules/ui/inspector.js

@@ -58,11 +58,12 @@ export function Inspector(context) {
         var footer = selection.selectAll('.footer')
             .data([0]);
 
-        footer.enter()
+        footer = footer.enter()
             .append('div')
-            .attr('class', 'footer');
+            .attr('class', 'footer')
+            .merge(footer);
 
-        selection.selectAll('.footer')
+        footer
             .call(ViewOnOSM(context).entityID(entityID));
 
 

modules/ui/raw_tag_editor.js

@@ -57,12 +57,11 @@ export function RawTagEditor(context) {
         newTag.enter()
             .append('button')
             .attr('class', 'add-tag')
-            .call(Icon('#icon-plus', 'light'))
-            .merge(newTag)
-            .on('click', addTag);
+            .on('click', addTag)
+            .call(Icon('#icon-plus', 'light'));
 
 
-        var items = list.selectAll('li')
+        var items = list.selectAll('.tag-row')
             .data(entries, function(d) { return d.key; });
 
         items.exit()
@@ -81,7 +80,9 @@ export function RawTagEditor(context) {
             .append('input')
             .property('type', 'text')
             .attr('class', 'key')
-            .attr('maxlength', 255);
+            .attr('maxlength', 255)
+            .on('blur', keyChange)
+            .on('change', keyChange);
 
         enter
             .append('div')
@@ -89,7 +90,10 @@ export function RawTagEditor(context) {
             .append('input')
             .property('type', 'text')
             .attr('class', 'value')
-            .attr('maxlength', 255);
+            .attr('maxlength', 255)
+            .on('blur', valueChange)
+            .on('change', valueChange)
+            .on('keydown.push-more', pushMore);
 
         enter
             .append('button')
@@ -97,19 +101,30 @@ export function RawTagEditor(context) {
             .attr('class', 'remove minor')
             .call(Icon('#operation-delete'));
 
-        if (context.taginfo()) {
-            enter.each(bindTypeahead);
-        }
 
         // Update
 
-        items = items.merge(enter);
-        items.order();
+        items = items
+            .merge(enter)
+            .sort(function(a, b) {
+                return (a.key === '') ? 1
+                    : (b.key === '') ? -1
+                    : d3.ascending(a.key, b.key);
+            });
 
         items
             .each(function(tag) {
+                var row = d3.select(this),
+                    key = row.select('input.key'),      // propagate bound data to child
+                    value = row.select('input.value');  // propagate bound data to child
+
+                if (context.taginfo()) {
+                    bindTypeahead(key, value);
+                }
+
                 var isRelation = (context.entity(id).type === 'relation'),
                     reference;
+
                 if (isRelation && tag.key === 'type') {
                     reference = TagReference({rtype: tag.value}, context);
                 } else {
@@ -120,25 +135,18 @@ export function RawTagEditor(context) {
                     reference.showing(false);
                 }
 
-                d3.select(this)
+                row
                     .call(reference.button)
                     .call(reference.body);
             });
 
-        getSetValue(items.selectAll('input.key')
+        items.selectAll('input.key')
             .attr('title', function(d) { return d.key; })
-            .on('blur', keyChange)
-            .on('change', keyChange),
-            function(d) { return d.key; }
-        );
+            .call(getSetValue, function(d) { return d.key; });
 
-        getSetValue(items.selectAll('input.value')
+        items.selectAll('input.value')
             .attr('title', function(d) { return d.value; })
-            .on('blur', valueChange)
-            .on('change', valueChange)
-            .on('keydown.push-more', pushMore),
-            function(d) { return d.value; }
-        );
+            .call(getSetValue, function(d) { return d.value; });
 
         items.selectAll('button.remove')
             .on('click', removeTag);
@@ -152,10 +160,7 @@ export function RawTagEditor(context) {
         }
 
 
-        function bindTypeahead() {
-            var row = d3.select(this),
-                key = row.selectAll('input.key'),
-                value = row.selectAll('input.value');
+        function bindTypeahead(key, value) {
 
             function sort(value, data) {
                 var sameletter = [],

modules/util/get_set_value.js

@@ -29,5 +29,6 @@ export function getSetValue(selection, value) {
     if (arguments.length === 1) {
         return selection.property('value');
     }
+
     return selection.each(d3_selection_value(value));
 }