#6732: Fix search filtering

This was broken after implementing mobile screen size support in #6327

netbox/project-static/src/search.ts

@@ -1,40 +1,44 @@
 import debounce from 'just-debounce-it';
-import { getElements, getRowValues, findFirstAdjacent } from './util';
+import { getElements, getRowValues, findFirstAdjacent, isTruthy } from './util';
 
-interface SearchFilterButton extends EventTarget {
-  dataset: { searchValue: string };
-}
+/**
+ * Change the display value and hidden input values of the search filter based on dropdown
+ * selection.
+ *
+ * @param event "click" event for each dropdown item.
+ * @param button Each dropdown item element.
+ */
+function handleSearchDropdownClick(event: Event, button: HTMLButtonElement) {
+  const dropdown = event.currentTarget as HTMLButtonElement;
+  const selectedValue = findFirstAdjacent<HTMLSpanElement>(dropdown, 'span.search-obj-selected');
+  const selectedType = findFirstAdjacent<HTMLInputElement>(dropdown, 'input.search-obj-type');
+  const searchValue = dropdown.getAttribute('data-search-value');
+  let selected = '' as string;
 
-function isSearchButton(el: any): el is SearchFilterButton {
-  return el?.dataset?.searchValue ?? null !== null;
+  if (selectedValue !== null && selectedType !== null) {
+    if (isTruthy(searchValue) && selected !== searchValue) {
+      selected = searchValue;
+      selectedValue.innerHTML = button.textContent ?? 'Error';
+      selectedType.value = searchValue;
+    } else {
+      selected = '';
+      selectedType.innerHTML = 'All Objects';
+      selectedType.value = '';
+    }
+  }
 }
 
+/**
+ * Initialize Search Bar Elements.
+ */
 function initSearchBar() {
-  const dropdown = document.getElementById('object-type-selector');
-  const selectedValue = document.getElementById('selected-value') as HTMLSpanElement;
-  const selectedType = document.getElementById('search-obj-type') as HTMLInputElement;
-  let selected = '';
-
-  if (dropdown !== null) {
-    const buttons = dropdown.querySelectorAll('li > button.dropdown-item');
-    for (const button of buttons) {
-      if (button !== null) {
-        function handleClick(event: Event) {
-          if (isSearchButton(event.target)) {
-            const objectType = event.target.dataset.searchValue;
-            if (objectType !== '' && selected !== objectType) {
-              selected = objectType;
-              selectedValue.innerHTML = button.textContent ?? 'Error';
-              selectedType.value = objectType;
-            } else {
-              selected = '';
-              selectedType.innerHTML = 'All Objects';
-              selectedType.value = '';
-            }
-          }
-        }
-        button.addEventListener('click', handleClick);
-      }
+  for (const dropdown of getElements<HTMLUListElement>(
+    'div.search-container ul.search-obj-selector',
+  )) {
+    for (const button of dropdown.querySelectorAll<HTMLButtonElement>(
+      'li > button.dropdown-item',
+    )) {
+      button.addEventListener('click', event => handleSearchDropdownClick(event, button));
     }
   }
 }

netbox/templates/layout.html

@@ -15,7 +15,7 @@
             {% include 'logo.html' %}
           </a>
           <ul class="nav flex-column">
-            <div class="d-block d-md-none mx-1 my-3">
+            <div class="d-block d-md-none mx-1 my-3 search-container">
               {% search_options %}
             </div>
             <div class="d-flex d-md-none mx-1 my-3 justify-content-end">
@@ -43,7 +43,7 @@
               <span class="navbar-toggler-icon"></span>
             </button>
           </div>
-          <div class="d-none d-md-flex w-100">
+          <div class="d-none d-md-flex w-100 search-container">
             {% search_options %}
             {% include './profile_button.html' %}
           </div>

netbox/utilities/templates/search/searchbar.html

@@ -9,8 +9,8 @@
     value="{{ request.GET.q }}"
     aria-describedby="search-button"
   />
-  <input id="search-obj-type" name="obj_type" hidden type="text" />
-  <span class="input-group-text" id="selected-value">All Objects</span>
+  <input name="obj_type" hidden type="text" class="search-obj-type" />
+  <span class="input-group-text search-obj-selected">All Objects</span>
   <button
     type="button"
     aria-expanded="false"
@@ -19,7 +19,7 @@
   >
     <i class="mdi mdi-filter-variant"></i>
   </button>
-  <ul id="object-type-selector" class="dropdown-menu dropdown-menu-end">
+  <ul class="dropdown-menu dropdown-menu-end search-obj-selector">
     {% for option in options %} {% if option.items|length == 0 %}
     <li>
       <button