static/js/fixedsearch: Fix a few UI quirks

1 files changed, 35 insertions, 11 deletions

diff --git a/static/js/fixedsearch.ts b/static/js/fixedsearch.ts
index 63a3b4b..938e1f5 100644
--- a/static/js/fixedsearch.ts
+++ b/static/js/fixedsearch.ts
@@ -11,7 +11,37 @@
     const dropdown = document.getElementById("search-results"); // targets the <ul>
     const container = document.getElementById("search-frame"); // targets the upper parent container
 
+    function first(element) {
+      return element.firstChild.nextElementSibling.firstChild
+        .nextElementSibling;
+    }
+
+    function last(element) {
+      return element.lastElementChild.firstChild.nextElementSibling;
+    }
+
+    function next(element) {
+      return element.activeElement.parentElement.nextElementSibling.firstChild
+        .nextElementSibling.focus();
+    }
+
+    function previous(element) {
+      return element.activeElement.parentElement.previousElementSibling
+        .firstChild
+        .nextElementSibling.focus();
+    }
+
+    function press(keyname) {
+      document.dispatchEvent(new KeyboardEvent("keydown", { "key": keyname }));
+    }
+
+    submit.addEventListener("click", function (event) {
+      first(dropdown).focus();
+      press("ArrowDown");
+    });
+
     form.addEventListener("focusin", function () {
+      container.setAttribute("data-focus", "");
       initialize();
     });
 
@@ -21,15 +51,15 @@
     });
 
     form.addEventListener("keydown", function (event) {
-      const head =
-        dropdown.firstChild.nextElementSibling.firstChild.nextElementSibling;
-      const tail = dropdown.lastElementChild.firstChild.nextElementSibling;
+      const head = first(dropdown);
+      const tail = last(dropdown);
 
       // ESC (27)
       if (query.contains(event.target)) {
         if (event.keyCode == 27) {
           document.activeElement.blur();
           dropdown.setAttribute("hidden", "");
+          container.removeAttribute("data-focus");
         }
       }
 
@@ -38,10 +68,7 @@
         event.preventDefault();
         if (document.activeElement == query) head.focus();
         else if (document.activeElement == tail) query.focus();
-        else {
-          document.activeElement.parentElement.nextElementSibling.firstChild
-            .nextElementSibling.focus();
-        }
+        else next(document);
       }
 
       // UP (38)
@@ -49,10 +76,7 @@
         event.preventDefault();
         if (document.activeElement == query) tail.focus();
         else if (document.activeElement == head) query.focus();
-        else {
-          document.activeElement.parentElement.previousElementSibling.firstChild
-            .nextElementSibling.focus();
-        }
+        else previous(document);
       }
 
       // BACKSPACE (8)