static/js/fixedsearch: Fix a few UI quirks

2 files changed, 29 insertions, 9 deletions

diff --git a/assets/css/default.css b/assets/css/default.css
index 5bc152e..3fe8ccf 100644
--- a/assets/css/default.css
+++ b/assets/css/default.css
@@ -1585,6 +1585,7 @@ author-list p {
 search-entry {
   display: inherit;
   width: 100%;
+  z-index: 1;
 }
 
 search-entry[data-focus],
diff --git a/assets/js/index.js b/assets/js/index.js
index bcb4509..c771211 100644
--- a/assets/js/index.js
+++ b/assets/js/index.js
@@ -327,10 +327,32 @@
     self.addEventListener("DOMContentLoaded", function() {
         const form = document.getElementById("search-form");
         const query = document.getElementById("search-input");
-        document.getElementById("search-submit");
+        const submit = document.getElementById("search-submit");
         const dropdown = document.getElementById("search-results");
         const container = document.getElementById("search-frame");
+        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();
         });
         form.addEventListener("submit", function(event) {
@@ -338,29 +360,26 @@
             return false;
         });
         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);
             if (query.contains(event.target)) {
                 if (event.keyCode == 27) {
                     document.activeElement.blur();
                     dropdown.setAttribute("hidden", "");
+                    container.removeAttribute("data-focus");
                 }
             }
             if (event.keyCode == 40) {
                 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);
             }
             if (event.keyCode == 38) {
                 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);
             }
             if (event.keyCode == 8) {
                 if (document.activeElement != query) {