Fix clicking away from input not hiding search

FetchCV · Jul 22, 2024 · 2a714e7 · 2a714e7
1 parent 4b174d1
commit 2a714e7
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 16 deletions.
diff --git a/public/scripts-src/userSearch.ts b/public/scripts-src/userSearch.ts
@@ -4,9 +4,14 @@
 // Username search
 //===============================================
 
-let usernameElement = document.getElementById("user-name") as HTMLInputElement;
-
+const usernameElement = document.getElementById("user-name") as HTMLInputElement;
+const searchResultsElement = document.querySelector(".search-results");
 const usernameInput = document.getElementById("user-name");
+
+usernameElement.addEventListener("blur", (event) => {
+   hideElement(searchResultsElement);
+});
+
 if (usernameInput) {
    usernameInput.addEventListener("keyup", (event) => {
       if (usernameElement.value.length > 0) {
@@ -33,8 +38,6 @@ async function getUpdatedSearchResults(search) {
    }
 }
 
-let searchResultsElement = document.querySelector(".search-results");
-
 function showUpdatedSearchResults(users) {
    searchResultsElement.innerHTML = "";
    for (let i = 0; i < users.length; i++) {

diff --git a/public/scripts/userSearch.js b/public/scripts/userSearch.js
@@ -2,8 +2,12 @@
 //===============================================
 // Username search
 //===============================================
-let usernameElement = document.getElementById("user-name");
+const usernameElement = document.getElementById("user-name");
+const searchResultsElement = document.querySelector(".search-results");
 const usernameInput = document.getElementById("user-name");
+usernameElement.addEventListener("blur", (event) => {
+    hideElement(searchResultsElement);
+});
 if (usernameInput) {
     usernameInput.addEventListener("keyup", (event) => {
         if (usernameElement.value.length > 0) {
@@ -28,7 +32,6 @@ async function getUpdatedSearchResults(search) {
         console.error("Error fetching users - ", error); // should show to user
     }
 }
-let searchResultsElement = document.querySelector(".search-results");
 function showUpdatedSearchResults(users) {
     searchResultsElement.innerHTML = "";
     for (let i = 0; i < users.length; i++) {

diff --git a/public/styles/tailwind.css b/public/styles/tailwind.css
@@ -1037,6 +1037,11 @@ video {
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
+.blur {
+  --tw-blur: blur(8px);
+  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+}
+
 .backdrop-blur-lg {
   --tw-backdrop-blur: blur(16px);
   -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
@@ -1087,21 +1092,11 @@ video {
     border-color: rgb(63 63 70 / var(--tw-border-opacity));
   }
 
-  .dark\:border-gray-700 {
-    --tw-border-opacity: 1;
-    border-color: rgb(55 65 81 / var(--tw-border-opacity));
-  }
-
   .dark\:border-t-zinc-600 {
     --tw-border-opacity: 1;
     border-top-color: rgb(82 82 91 / var(--tw-border-opacity));
   }
 
-  .dark\:bg-black {
-    --tw-bg-opacity: 1;
-    background-color: rgb(0 0 0 / var(--tw-bg-opacity));
-  }
-
   .dark\:bg-zinc-600 {
     --tw-bg-opacity: 1;
     background-color: rgb(82 82 91 / var(--tw-bg-opacity));