static/js/fixedsearch: Track last click and return state

For chromium and others that drop state
Apply keyboard/click cancelling to form and children

1 files changed, 41 insertions, 20 deletions

diff --git a/static/js/fixedsearch.ts b/static/js/fixedsearch.ts
index fb53b6b..f8be575 100644
--- a/static/js/fixedsearch.ts
+++ b/static/js/fixedsearch.ts
@@ -5,11 +5,11 @@
 
 (function () {
   self.addEventListener("DOMContentLoaded", function () {
-    const form = document.getElementById("search-form"); // search form
-    const query = document.getElementById("search-input"); // input box for search
-    const submit = document.getElementById("search-submit"); // form submit button
-    const dropdown = document.getElementById("search-results"); // targets the <ul>
-    const container = document.getElementById("search-frame"); // targets the upper parent container
+    const form = document.getElementById("search-form"); // targets <form>
+    const query = document.getElementById("search-input"); // targets <input>
+    const submit = document.getElementById("search-submit"); // targets <button>
+    const dropdown = document.getElementById("search-results"); // targets <ul>
+    const container = document.getElementById("search-frame"); // targets parent
 
     function first(element) {
       return element.firstChild.nextElementSibling.firstChild
@@ -35,9 +35,26 @@
       document.dispatchEvent(new KeyboardEvent("keydown", { "key": keyname }));
     }
 
-    submit.addEventListener("click", function () {
+    let selected;
+
+    submit.addEventListener("click", function (event) {
+      if (selected) {
+        event.preventDefault();
+        selected.focus();
+        return selected.click();
+      }
       first(dropdown).focus();
       press("ArrowDown");
+      document.activeElement.click();
+    });
+
+    ["keyup", "click"].forEach(function (event) {
+      form.addEventListener(event, function () {
+        if (document.activeElement.nodeName === "A") {
+          return selected = document.activeElement;
+        }
+        selected = undefined;
+      });
     });
 
     form.addEventListener("focusin", function () {
@@ -51,11 +68,8 @@
     });
 
     form.addEventListener("keydown", function (event) {
-      const head = first(dropdown);
-      const tail = last(dropdown);
-
       // ESC (27)
-      if (query.contains(event.target)) {
+      if (form.contains(event.target)) {
         if (event.keyCode == 27) {
           document.activeElement.blur();
           dropdown.setAttribute("hidden", "");
@@ -63,6 +77,17 @@
         }
       }
 
+      // BACKSPACE (8)
+      if (event.keyCode == 8) {
+        if (document.activeElement != query) {
+          event.preventDefault();
+          query.focus();
+        }
+      }
+
+      const head = first(dropdown);
+      const tail = last(dropdown);
+
       // DOWN (40)
       if (event.keyCode == 40) {
         event.preventDefault();
@@ -79,14 +104,6 @@
         else previous(document);
       }
 
-      // BACKSPACE (8)
-      if (event.keyCode == 8) {
-        if (document.activeElement != query) {
-          event.preventDefault();
-          query.focus();
-        }
-      }
-
       // ENTER (13)
       if (event.keyCode == 13) {
         if (dropdown && document.activeElement == query) {
@@ -109,8 +126,12 @@
       scrolls++;
     });
 
-    document.addEventListener("click", function (event) {
-      if (!form.contains(event.target) && !(document.activeElement === query)) {
+    self.addEventListener("click", function (event) {
+      if (
+        !form.contains(event.target) &&
+        !(document.activeElement === query) &&
+        !(document.activeElement === submit)
+      ) {
         dropdown.setAttribute("hidden", "");
         container.removeAttribute("data-focus");
       }