Auth lookup dropdown keyboard navigation (#957)

* restore dropdown list arrow key navigation * resolve keyboard/mouse conflict in lookup dropdpown option highlighting --------- Co-authored-by: jbukhari <[email protected]>
dag-hammarskjold-library · Jan 27, 2023 · 7de1d27 · 7de1d27
1 parent 235cecd
commit 7de1d27
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 8 deletions.
diff --git a/dlx_rest/static/css/record.css b/dlx_rest/static/css/record.css
@@ -242,11 +242,11 @@ span.lookup-choice-code {
     color: blue;
 }
 
-li.lookup-choice:hover {
+li.lookup-choice-hover:hover {
     background-color: gray;
 }
 
-option.lookup-choice:hover {
+option.lookup-choice-hover:hover {
     background-color: gray;
 }
 

diff --git a/dlx_rest/static/js/record.js b/dlx_rest/static/js/record.js
@@ -3148,15 +3148,22 @@ function keyupAuthLookup(event) {
     let subfield = event.currentTarget.eventParams[1];
     let field = subfield.parentField;
     let jmarc = field.parentRecord;
+    let dropdown = document.getElementById("typeahead-dropdown");
 
     if (event.type === "input") {
+        if (dropdown && dropdown.list) {
+            // the drodpwn list is being navigated. not sure why it triggers the inupt event
+            return
+        }
+
         subfield.value = subfield.valueSpan.innerText.trim();
     } else if (event.type == "paste") {
         subfield.value = event.clipboardData.getData("text").trim();
     } else {
         throw Error("Event type not recognized")
     }
-
+
+    dropdown && dropdown.remove();
     subfield.valueSpan.classList.add("authority-controlled-unmatched");
     clearTimeout(subfield.timer);
     delete subfield.xref;
@@ -3244,9 +3251,6 @@ function keyupAuthLookup(event) {
         )
     });
 
-    let dropdown = document.getElementById("typeahead-dropdown");
-    dropdown && dropdown.remove();
-
     if (subfield.value) {
         subfield.timer = setTimeout(
             function () {
@@ -3280,12 +3284,19 @@ function keyupAuthLookup(event) {
                      // doesn't build correctly when there is only one choice
                     list.className = "list-group";
                     // list.focus() // disabled because we still want the field to be typeable when the dropdown appears
+
+                    list.addEventListener("change", function() {
+                        list.childNodes.forEach(x => {
+                            x.classList.remove("lookup-choice-hover");
+                        });
+                    })
 
                     // navigate into dropdown choices with down arrow key
                     // should it be with return instead?
                     subfield.valueSpan.addEventListener("keydown", (event) => {
                         if (event.keyCode === 40) {
                             // down arrow key
+                            dropdown.list = list;
                             list.focus(); // list now navigable by default <select> behavior
                             list.firstChild.selected = true; // jump to to first choice
                         }
@@ -3301,11 +3312,15 @@ function keyupAuthLookup(event) {
                         item.innerHTML = choice.subfields.map(x => `<span class="lookup-choice-code">$${x.code}</span>&nbsp;<span class="lookup-choice-value">${x.value}</span>`).join("<br>");
 
                         item.addEventListener("mouseover", function () {
-                            item.classList.add("lookup-choice");
+                            if (dropdown.list) {
+                                dropdown.list.childNodes.forEach(x => {x.selected = false})
+                            }
+
+                            item.classList.add("lookup-choice-hover");
                         });
 
                         item.addEventListener("mouseout", function () {
-                            item.classList.remove("lookup-choice");
+                            item.classList.remove("lookup-choice-hover");
                             subfield.value = subfield.valueSpan.innerText;
                         });