Update typeahead, fixing overlap issues. Fixes #309

css/app.css

@@ -716,8 +716,8 @@ div.typeahead {
     box-shadow: 0 5px 10px 0 rgba(0,0,0,.2);
     margin-top: -1px;
     background: white;
-    max-height: 120px;
-    overflow: auto;
+    max-height: 180px;
+    overflow: hidden;
     border: 1px solid #ccc;
 }
 
@@ -729,6 +729,7 @@ div.typeahead a {
     border-top:1px solid #ccc;
     background-color: #fff;
     padding:1px 4px;
+    white-space: nowrap;
 }
 
 div.typeahead a:hover,

js/id/taginfo.js

@@ -5,7 +5,7 @@ iD.taginfo = function() {
     taginfo.keys = function(parameters, callback) {
         d3.json(endpoint + 'db/keys?' +
             iD.util.qsString(_.extend({
-                rp: 20,
+                rp: 6,
                 sortname: 'count_all',
                 sortorder: 'desc',
                 page: 1

js/lib/d3.typeahead.js

@@ -14,35 +14,47 @@ d3.typeahead = function() {
                     top: rect.bottom + 'px'
                 });
             selection
-                .on('keyup.typeahead', update);
+                .on('keyup.typeahead', key);
             hidden = false;
         }
 
         function hide() {
-            window.setTimeout(function() {
-                container.remove();
-                idx = 0;
-                hidden = true;
-            }, 500);
+            container.remove();
+            idx = 0;
+            hidden = true;
+        }
+
+        function slowHide() {
+            window.setTimeout(hide, 150);
         }
 
         selection
             .on('focus.typeahead', setup)
-            .on('blur.typeahead', hide);
+            .on('blur.typeahead', slowHide);
 
-        function update() {
-            if (hidden) setup();
-
-            if (d3.event.keyCode === 40) idx++;
-            if (d3.event.keyCode === 38) idx--;
-            if (d3.event.keyCode === 13) {
-                select(container.select('a.selected').datum());
-                hide();
-            }
+        function key() {
+           if (d3.event.keyCode === 40) {
+               idx++;
+               return highlight();
+           } else if (d3.event.keyCode === 38) {
+               idx--;
+               return highlight();
+           } else if (d3.event.keyCode === 13) {
+               select(container.select('a.selected').datum());
+               hide();
+           } else {
+               update();
+           }
+        }
 
+        function highlight() {
             container
                 .selectAll('a')
                 .classed('selected', function(d, i) { return i == idx; });
+        }
+
+        function update() {
+            if (hidden) setup();
 
             data(selection, function(data) {
                 container.style('display', function() {
@@ -60,13 +72,18 @@ d3.typeahead = function() {
                     .on('click', select);
 
                 options.exit().remove();
+
+                options
+                    .classed('selected', function(d, i) { return i == idx; });
             });
         }
 
         function select(d) {
-            selection.property('value', d.value)
+            selection
+                .property('value', d.value)
                 .trigger('change');
         }
+
     };
 
     typeahead.data = function(_) {