From afe5aa788c54d63687f69df5e59deabd180341aa Mon Sep 17 00:00:00 2001
From: John Firebaugh <john.firebaugh@gmail.com>
Date: Mon, 25 Mar 2013 11:43:04 -0700
Subject: [PATCH] d3.combobox should be called on input element

---
 js/id/ui/preset/address.js |  5 ++---
 js/id/ui/preset/combo.js   |  4 +---
 js/id/ui/taglist.js        | 20 +++++++++-----------
 js/lib/d3.combobox.js      | 34 +++++++++++++++++++---------------
 4 files changed, 31 insertions(+), 32 deletions(-)

diff --git a/js/id/ui/preset/address.js b/js/id/ui/preset/address.js
index 4949f1257..3ee7df5aa 100644
--- a/js/id/ui/preset/address.js
+++ b/js/id/ui/preset/address.js
@@ -69,7 +69,8 @@ iD.ui.preset.address = function(field, context) {
             .attr('placeholder', field.t('placeholders.street'))
             .attr('class', 'addr-street')
             .on('blur', change)
-            .on('change', change);
+            .on('change', change)
+            .call(d3.combobox().data(getStreets()));
 
         city = wrap.append('input')
             .property('type', 'text')
@@ -78,8 +79,6 @@ iD.ui.preset.address = function(field, context) {
             .on('blur', change)
             .on('change', change)
             .call(close());
-
-        streetwrap.call(d3.combobox().data(getStreets()));
     }
 
     function change() {
diff --git a/js/id/ui/preset/combo.js b/js/id/ui/preset/combo.js
index dd53b8cf5..e60a955f5 100644
--- a/js/id/ui/preset/combo.js
+++ b/js/id/ui/preset/combo.js
@@ -10,9 +10,7 @@ iD.ui.preset.combo = function(field) {
             .attr('type', 'text')
             .attr('id', 'preset-input-' + field.id)
             .on('change', change)
-            .on('blur', change);
-
-         selection
+            .on('blur', change)
             .call(combobox);
 
         if (field.options) {
diff --git a/js/id/ui/taglist.js b/js/id/ui/taglist.js
index f7ed663b2..a032c5142 100644
--- a/js/id/ui/taglist.js
+++ b/js/id/ui/taglist.js
@@ -121,8 +121,8 @@ iD.ui.Taglist = function(context, entity) {
     function bindTypeahead() {
         var geometry = entity.geometry(context.graph()),
             row = d3.select(this),
-            key = row.selectAll('.key-wrap'),
-            value = row.selectAll('.input-wrap-position');
+            key = row.selectAll('input.key'),
+            value = row.selectAll('input.value');
 
         function sort(value, data) {
             var sameletter = [],
@@ -137,28 +137,26 @@ iD.ui.Taglist = function(context, entity) {
             return sameletter.concat(other);
         }
 
-        var keyinput = key.select('input');
         key.call(d3.combobox()
-            .fetcher(function(_, __, callback) {
+            .fetcher(function(value, __, callback) {
                 taginfo.keys({
                     debounce: true,
                     geometry: geometry,
-                    query: keyinput.property('value')
+                    query: value
                 }, function(err, data) {
-                    if (!err) callback(sort(keyinput.property('value'), data));
+                    if (!err) callback(sort(value, data));
                 });
             }));
 
-        var valueinput = value.select('input');
         value.call(d3.combobox()
-            .fetcher(function(_, __, callback) {
+            .fetcher(function(value, __, callback) {
                 taginfo.values({
                     debounce: true,
-                    key: keyinput.property('value'),
+                    key: key.property('value'),
                     geometry: geometry,
-                    query: valueinput.property('value')
+                    query: value
                 }, function(err, data) {
-                    if (!err) callback(sort(valueinput.property('value'), data));
+                    if (!err) callback(sort(value, data));
                 });
             }));
     }
diff --git a/js/lib/d3.combobox.js b/js/lib/d3.combobox.js
index 2f79a0848..2d42aa08c 100644
--- a/js/lib/d3.combobox.js
+++ b/js/lib/d3.combobox.js
@@ -1,7 +1,7 @@
 d3.combobox = function() {
     var event = d3.dispatch('accept'),
         id = d3.combobox.id ++,
-        container, input, shown = false, data = [];
+        data = [];
 
     var fetcher = function(val, data, cb) {
         cb(data.filter(function(d) {
@@ -12,20 +12,24 @@ d3.combobox = function() {
         }));
     };
 
-    var typeahead = function(selection) {
-        var idx = -1;
+    var typeahead = function(input) {
+        var idx = -1, container, shown = false;
 
-        input = selection.select('input')
-            .classed('combobox-input', true);
-
-        selection.append('div', input)
-            .attr('class', 'combobox-carat')
-            .on('mousedown', function() {
-                // prevent the form element from blurring. it blurs
-                // on mousedown
-                d3.event.stopPropagation();
-                d3.event.preventDefault();
-                mousedown();
+        input
+            .classed('combobox-input', true)
+            .each(function() {
+                var parent = this.parentNode,
+                    sibling = this.nextSibling;
+                d3.select(parent)
+                    .insert('div', function() { return sibling; })
+                    .attr('class', 'combobox-carat')
+                    .on('mousedown', function () {
+                        // prevent the form element from blurring. it blurs
+                        // on mousedown
+                        d3.event.stopPropagation();
+                        d3.event.preventDefault();
+                        mousedown();
+                    });
             });
 
         function updateSize() {
@@ -205,7 +209,7 @@ d3.combobox = function() {
                     .order();
             }
 
-            fetcher.apply(selection, [value, data, render]);
+            fetcher.apply(input, [value, data, render]);
         }
 
         // select the choice given as d