Add a "clear" button for quick search

Fixes #9857

netbox/project-static/src/search.ts

@@ -27,6 +27,23 @@ function handleSearchDropdownClick(event: Event, button: HTMLButtonElement): voi
   }
 }
 
+/**
+ * Show/hide quicksearch clear button.
+ *
+ * @param event "keyup" or "search" event for the quicksearch input
+ */
+function quickSearchEventHandler(event: Event): void {
+  const quicksearch = event.currentTarget as HTMLInputElement;
+  const inputgroup = quicksearch.parentElement as HTMLDivElement;
+  if (isTruthy(inputgroup)) {
+    if (quicksearch.value === "") {
+      inputgroup.classList.add("hide-last-child");
+    } else {
+      inputgroup.classList.remove("hide-last-child");
+    }
+  }
+}
+
 /**
  * Initialize Search Bar Elements.
  */
@@ -40,8 +57,35 @@ function initSearchBar(): void {
   }
 }
 
+/**
+ * Initialize Quicksearch Event listener/handlers.
+ */
+function initQuickSearch(): void {
+  const quicksearch = document.getElementById("quicksearch") as HTMLInputElement;
+  const clearbtn = document.getElementById("quicksearch_clear") as HTMLButtonElement;
+  if (isTruthy(quicksearch)) {
+    quicksearch.addEventListener("keyup", quickSearchEventHandler, {
+      passive: true
+    })
+    quicksearch.addEventListener("search", quickSearchEventHandler, {
+      passive: true
+    })
+    if (isTruthy(clearbtn)) {
+      clearbtn.addEventListener("click", async () => {
+        const search = new Event('search');
+        quicksearch.value = '';
+        await new Promise(f => setTimeout(f, 100));
+        quicksearch.dispatchEvent(search);
+      }, {
+        passive: true
+      })
+    }
+  }
+}
+
 export function initSearch(): void {
   for (const func of [initSearchBar]) {
     func();
   }
+  initQuickSearch();
 }

netbox/project-static/styles/netbox.scss

@@ -416,6 +416,27 @@ nav.search {
   }
 }
 
+// Styles for the quicksearch and its clear button; 
+// Overrides input-group styles and adds transition effects
+.quicksearch {
+  input[type="search"] {
+    border-radius: $border-radius  !important;
+  }
+
+  button {
+    margin-left: -32px !important;
+    z-index: 100 !important;
+    outline: none !important;
+    border-radius: $border-radius  !important;
+    transition: visibility 0s, opacity 0.2s linear;
+  }
+
+  button :hover {
+    opacity: 50%;
+    transition: visibility 0s, opacity 0.1s linear;
+  }
+}
+
 main.layout {
   display: flex;
   flex-wrap: nowrap;

netbox/project-static/styles/overrides.scss

@@ -34,3 +34,11 @@ a[type='button'] {
 .badge {
   font-size: $font-size-xs;
 }
+
+/* clears the 'X' in search inputs from webkit browsers */
+input[type='search']::-webkit-search-decoration,
+input[type='search']::-webkit-search-cancel-button,
+input[type='search']::-webkit-search-results-button,
+input[type='search']::-webkit-search-results-decoration {
+  -webkit-appearance: none !important;
+}

netbox/project-static/styles/theme-dark.scss

@@ -92,6 +92,10 @@ $input-focus-color: $input-color;
 $input-placeholder-color: $gray-700;
 $input-plaintext-color: $body-color;
 
+input {
+  color-scheme: dark;
+}
+
 $form-check-input-active-filter: brightness(90%);
 $form-check-input-bg: $input-bg;
 $form-check-input-border: 1px solid rgba(255, 255, 255, 0.25);

netbox/project-static/styles/theme-light.scss

@@ -22,7 +22,6 @@ $theme-colors: (
   'danger': $danger,
   'light': $light,
   'dark': $dark,
-
   // General-purpose palette
   'blue': $blue-500,
   'indigo': $indigo-500,
@@ -36,7 +35,7 @@ $theme-colors: (
   'cyan': $cyan-500,
   'gray': $gray-500,
   'black': $black,
-  'white': $white,
+  'white': $white
 );
 
 $light: $gray-200;

netbox/project-static/styles/utilities.scss

@@ -42,3 +42,9 @@ table td {
     visibility: visible !important;
   }
 }
+
+// Hides the last child of an element
+.hide-last-child :last-child {
+  visibility: hidden;
+  opacity: 0;
+}