static/js/fixedsearch: Keep search bar focused on inactivity

3 files changed, 14 insertions, 4 deletions

diff --git a/static/css/default.css b/static/css/default.css
index 3ecb7a9..caeaab5 100644
--- a/static/css/default.css
+++ b/static/css/default.css
@@ -1147,6 +1147,7 @@ search-entry {
   width: 100%;
 }
 
+search-entry[data-focus],
 search-entry:focus-within {
   position: absolute;
 }
@@ -1161,12 +1162,12 @@ search-entry form {
   background-color: var(--background);
   border-radius: 0.5rem;
   border: 1px solid;
-  border: 1px solid;
   border-color: #ccc;
   border-color: var(--border-darker);
   display: inline-flex;
-  margin: 0 0.5rem;
+  margin: 0 1rem;
   width: 100%;
+  position: relative;
 }
 
 search-entry form button {
@@ -1212,13 +1213,14 @@ search-entry form input:focus {
 search-entry ul {
   position: absolute;
   background-color: inherit;
-  padding-top: 3rem;
+  padding-top: 2.9rem;
   border: 1px solid #ccc;
   border: 1px solid var(--border-darker);
   border-radius: 0.5rem;
   z-index: -1;
-  margin-right: 0.5rem;
+  margin-right: 1rem;
   margin-left: -0.05rem;
+  width: 100.3%;
 }
 
 search-entry ul li a span {
diff --git a/static/js/fixedsearch.ts b/static/js/fixedsearch.ts
index 26b9ac1..3788cb3 100644
--- a/static/js/fixedsearch.ts
+++ b/static/js/fixedsearch.ts
@@ -9,6 +9,7 @@
     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
 
     form.addEventListener("focusin", function () {
       initialize();
@@ -79,6 +80,7 @@
         scrolls = 0;
         document.activeElement.blur();
         dropdown.setAttribute("hidden", "");
+        container.removeAttribute("data-focus");
       }
       scrolls++;
     });
@@ -86,6 +88,7 @@
     document.addEventListener("click", function (event) {
       if (!form.contains(event.target)) {
         dropdown.setAttribute("hidden", "");
+        container.removeAttribute("data-focus");
       }
     });
 
@@ -163,6 +166,7 @@
             </li>
               `;
         dropdown.removeAttribute("hidden");
+        container.setAttribute("data-focus", "");
       } else {
         dropdown.removeAttribute("hidden");
         for (const string in results.slice(0, 10)) {
diff --git a/static/js/index.js b/static/js/index.js
index df649df..8c6e922 100644
--- a/static/js/index.js
+++ b/static/js/index.js
@@ -279,6 +279,7 @@
         const query = document.getElementById("search-input");
         document.getElementById("search-submit");
         const dropdown = document.getElementById("search-results");
+        const container = document.getElementById("search-frame");
         form.addEventListener("focusin", function() {
             initialize();
         });
@@ -331,12 +332,14 @@
                 scrolls = 0;
                 document.activeElement.blur();
                 dropdown.setAttribute("hidden", "");
+                container.removeAttribute("data-focus");
             }
             scrolls++;
         });
         document.addEventListener("click", function(event) {
             if (!form.contains(event.target)) {
                 dropdown.setAttribute("hidden", "");
+                container.removeAttribute("data-focus");
             }
         });
         function fetch_JSON(path, callback) {
@@ -401,6 +404,7 @@
             </li>
               `;
                 dropdown.removeAttribute("hidden");
+                container.setAttribute("data-focus", "");
             } else {
                 dropdown.removeAttribute("hidden");
                 for(const string in results.slice(0, 10)){