From a076c54ed5558808fccaa553625658a2854b54ba Mon Sep 17 00:00:00 2001
From: Quincy Morgan <quincy.morgan@icloud.com>
Date: Tue, 12 Mar 2019 10:23:26 -0400
Subject: [PATCH] Fix arrow key navigation

---
 css/80_app.css              |  9 +++++----
 modules/ui/search_add.js    | 25 +++++++++++++------------
 modules/ui/tag_reference.js | 10 ++++++----
 3 files changed, 24 insertions(+), 20 deletions(-)

diff --git a/css/80_app.css b/css/80_app.css
index 954540881..2072dbcc5 100644
--- a/css/80_app.css
+++ b/css/80_app.css
@@ -653,13 +653,14 @@ button.add-note svg.icon {
 .search-add .popover .list {
     max-height: 70vh;
 }
-.search-add .list-item {
+.search-add .list-item > .row {
     display: flex;
     position: relative;
     padding: 2px;
 }
-.search-add .list-item:not(:last-of-type),
-.search-add .subsection > * {
+.search-add .list-item:not(:last-of-type) .row,
+.search-add .subsection.subitems .list-item .row,
+.search-add .subsection > .tag-reference-body  {
     border-bottom: 1px solid #DCDCDC;
 }
 .search-add .list-item .label {
@@ -687,7 +688,7 @@ button.add-note svg.icon {
 [dir='rtl'] .search-add .list-item .label .icon.inline {
     margin-right: 0;
 }
-.search-add .list-item > *:not(button) {
+.search-add .list-item .row > *:not(button) {
     pointer-events: none;
 }
 .search-add .list-item button.choose {
diff --git a/modules/ui/search_add.js b/modules/ui/search_add.js
index e83736219..3e134b8d7 100644
--- a/modules/ui/search_add.js
+++ b/modules/ui/search_add.js
@@ -154,10 +154,9 @@ export function uiSearchAdd(context) {
             if (priorFocus.empty()) {
                 nextFocus = popover.selectAll('.list > .list-item:first-child');
             } else {
-                nextFocus = popover.selectAll('.list .list-item.focused + .list-item');
-                if (nextFocus.empty()) {
-                    nextFocus = d3_select(priorFocus.nodes()[0].nextElementSibling)
-                        .selectAll('.list-item:first-child');
+                nextFocus = d3_select(priorFocus.nodes()[0].nextElementSibling);
+                if (!nextFocus.empty() && !nextFocus.classed('list-item')) {
+                    nextFocus = nextFocus.selectAll('.list-item:first-child');
                 }
                 if (nextFocus.empty()) {
                     parentSubsection = priorFocus.nodes()[0].closest('.list .subsection');
@@ -268,7 +267,7 @@ export function uiSearchAdd(context) {
 
     function drawList(list, data) {
 
-        list.selectAll('.subsection').remove();
+        list.selectAll('.subsection.subitems').remove();
 
         var dataItems = data.map(function(preset) {
             return itemForPreset(preset);
@@ -294,7 +293,7 @@ export function uiSearchAdd(context) {
 
     function drawItems(selection) {
 
-        var row = selection
+        var item = selection
             .append('div')
             .attr('class', 'list-item')
             .attr('id', function(d) {
@@ -315,6 +314,9 @@ export function uiSearchAdd(context) {
                     .classed('focused', false);
             });
 
+        var row = item.append('div')
+            .attr('class', 'row');
+
         row.append('button')
             .attr('class', 'choose')
             .on('click', function(d) {
@@ -372,17 +374,16 @@ export function uiSearchAdd(context) {
                 d3_select(this).call(presetFavorite.button);
             }
         });
-        row.each(function(d) {
+        item.each(function(d) {
             if ((d.geometry && !d.isSubitem) || d.geometries) {
 
                 var reference = uiTagReference(d.preset.reference(d.geometry || d.geometries[0]), context);
 
-                var thisRow = d3_select(this);
-                thisRow.call(reference.button, 'accessory', 'info');
+                var thisItem = d3_select(this);
+                thisItem.selectAll('.row').call(reference.button, 'accessory', 'info');
 
-                var selector = '#' + thisRow.node().id + ' + *';
-                var subsection = d3_select(thisRow.node().parentElement)
-                    .insert('div', selector)
+                var subsection = thisItem
+                    .append('div')
                     .attr('class', 'subsection reference');
                 subsection.call(reference.body);
             }
diff --git a/modules/ui/tag_reference.js b/modules/ui/tag_reference.js
index 47575d58e..c4c4cdbce 100644
--- a/modules/ui/tag_reference.js
+++ b/modules/ui/tag_reference.js
@@ -119,8 +119,9 @@ export function uiTagReference(what) {
 
         _showing = true;
 
-        _button.selectAll('svg.icon use').each(function(iconUse) {
-            if (iconUse.attr && iconUse.attr('href') === '#iD-icon-info') {
+        _button.selectAll('svg.icon use').each(function() {
+            var iconUse = d3_select(this);
+            if (iconUse.attr('href') === '#iD-icon-info') {
                 iconUse.attr('href', '#iD-icon-info-filled');
             }
         });
@@ -139,8 +140,9 @@ export function uiTagReference(what) {
 
         _showing = false;
 
-        _button.selectAll('svg.icon use').each(function(iconUse) {
-            if (iconUse.attr && iconUse.attr('href') === '#iD-icon-info-filled') {
+        _button.selectAll('svg.icon use').each(function() {
+            var iconUse = d3_select(this);
+            if (iconUse.attr('href') === '#iD-icon-info-filled') {
                 iconUse.attr('href', '#iD-icon-info');
             }
         });