From 63435f2ec16d381e3d192b6fa007f57e9324a3be Mon Sep 17 00:00:00 2001
From: checktheroads <matt@allroads.io>
Date: Fri, 7 May 2021 11:07:06 -0700
Subject: [PATCH] #6732: Fix search filtering

This was broken after implementing mobile screen size support in #6327
---
 netbox/project-static/dist/netbox.js          | Bin 546729 -> 546884 bytes
 netbox/project-static/dist/netbox.js.map      | Bin 1326964 -> 1328493 bytes
 netbox/project-static/src/search.ts           |  68 +++++++++---------
 netbox/templates/layout.html                  |   4 +-
 .../utilities/templates/search/searchbar.html |   6 +-
 5 files changed, 41 insertions(+), 37 deletions(-)

diff --git a/netbox/project-static/dist/netbox.js b/netbox/project-static/dist/netbox.js
index c7d68128a9c3b529be3d53aed30c3252e0edef5d..d86555f8ef6e51eb2dd0d28563dc91ba2989a2d4 100644
GIT binary patch
delta 1042
zcmbtTK}b|V80Oi&d8@mc2g_2?=S#L3dp?%Bq}w23LV^;8L0}!m-B}%Z%`EfgZOXDL
zv=kkKV(1W2r#eL5yaj>hg6P(<TOGO-btr1qU0JWu;qgEI`M-a@@B9CG@oIQ)XL!42
z)!J%DYKfZt04!S3!>izfUf#6fuKNXyTDsB(-s#)h_NXQFQS5v)VIcu}P1ru|F#SFO
zHV3KCQKd|zD}91#kdLLLTrCp0LX|JHl>!5OQHk&%qD1Cb$Hem5SVTjbSG3?E{ig#A
zo@BfftHT9qqeMOAGhO-xj&C)QWfI2qY>YiG$Kx;@##m%B&A%{{fiUZ<fJKWkR;wEb
zGL*^0rie|#7&Bi4jB_e4EzZy3CJ0K*14Y->wBX9nHh{8V1vhI@a#BusGg68L>G@%>
ze>-Mq!u0a$iB>ajDh%Dr%WFnc)GGBngsR1u=M@v&jbXzjV;7d%@|>PC1y(-LoHy4K
zX2`j5c#vxuC8U0G#~$gfyG(q6C8Yaw^luxCTcN&r&+gM-r=1Z!m$o_}gUY9<imJJy
zkWd5>M7d!|un0IrC@2U{b0~yJzu9u!zG|MR{3?u5g$LAxYLRggh8q>GcfQ-bHaBB!
z5Y{gp;PnW6psA_IFw#Fdz$vp8{V6bH5uHnc3xG_LiKQEQYCJihAEiLb9N$lZ8T~m0
zI`yX{80@PHVJN5MM&&S3g-xS&@XR!N-43<~g`rh!(Go!sqH5JYm(3b~b9%OB_m2yc
zYUl`2g&08C0+0safVFGj`}=xG*j@)1`cGl!`|JH^pqh)1Ilbjxp(``%B}nwo6nJh$
z`e_<?`t3sUgf8_siDLy^Y^+s|70sL!jT9{CZ)tF?J2D!|Ee(;r-U-g?`I_B(@n5u>
k(eHa(-yDj~>%dE~U-a{OY}`3@H{Auy=j^7tl8<Nq0_(X^9{>OV

delta 803
zcmb7CK}-}e6wR<qy9+LnATEIgcE>=bWOf8SXjqz+L<EgOLeOYTFlFiBn8|e0=_0sU
zMBT)L2R&&1$%_}l3B1Tr58h3TA@ShdlQ-{n79t$Hn6zp8`d|CrYd`Piw|DZJ4WrT0
zNHkg-=4-TIcyDf^Z+nYHJa0g)1$}{Eop@w#o8m<SzP6$bcshpj8L{+$msLTnS9l@f
zfu0L#5eF_!<NlNJk}nrlSy1H~3}JE_XA4Z0?-w+$Nz$;OmR0mUJFEslo>ER~t4!vY
z<5OvKcz-t81v3~88C9rU#=X$<%p6;iq^22xEnUUr3RmP9=@4?4nPL%FZp7moZ^a^t
zmZfj-hlfQxlx#tLN4b6&ayheb<2pT*U^B{L4xyeIR$}AUl$6?(6S_?!)F<PbXvM%0
z)0zx|+*~t^=&01PNWHFG5uRMYeTk|~VD^=n>#lp%u&jI$<}}o_8#)3$B6J$=wIc+x
zNtA`{6z)t2hrvb?oiP}EXh(yFfc<tfkq{*TMhcBU&cLUjltSn9j?_Re)2aESsN{Oh
z6VhgGWRqgvR#YF5Lhp3hoi?;Nz+7&7r0)443xf3;b3I$@bk2{C5~AgPUo-n)Cym>>
z0#XyYHaMyku>0H0B#tW{{6DcneVR=9;X^r$hWue}p07-;Rcrx|Q>Y(yPoNjZGEAhA
z1xt_2Y<EPxgZ$&K!d%58Wk>Kbjc&uwX`F$|6+8gh4wQx;Yi6dY{o+5gANc$mzjob>
fDgJSsjyj6o^_?<&x`v0IZ*?Hu@!nQP^6k|>SZ@4B

diff --git a/netbox/project-static/dist/netbox.js.map b/netbox/project-static/dist/netbox.js.map
index 33fdbf58e51c85ab85976339f86047d9ab92a059..8a46e91a89cb3efb0435854ab53f82cc5669cce0 100644
GIT binary patch
delta 1666
zcmb7DUuauZ7$-Nkom-ombJr$CSLmsXCDGF+PFuy=xpQyQKcpe;(zFwVnI(7KZEtVV
z<fe8?heC1a!yc4)P{i(G!caG-j1`<OKFh>Ch~kScV<?^fKtUL+e&_y)8GF&dcfOPF
ze82DayT5zxpLeH!d1L044c~^a;lCoDzaXSl_G(xh64ughSA{SOekdR@PwQ#+M~|4<
z`u#%Nre9c0v%fwTH)d0mCKLi|k&ILIC6!Fl>~azc(<Wc(JYO=TNYzCJI_QGkysYvv
zCCdt5VVfsUC{%qi$y+q`&1YihSe~46N^o4{JvmaKv_Mv%YT5XC=uTxxmQur>eNg3l
z;7L<;&F0BDG<nW4X_LcR;7ZrnwM*ja;WSM@u8<rb4#Gj)B%PiBP<Grwf*h_-t=i)#
zS3t=^k{(&&t+_>Z<JUHFG<Agcl--^bO;+4(hN{B~(LwQ$LY`9SSdz=Iwb+kM$vjo_
zP7Ppl4rzu?+Rv9|J*wE(>G+!^8Jc{I&D?2=2oqz>H!SXN%g|X}akgnXtXf;IeIlN1
z_odH-u8I(C5bY4VARd6&4Y3EJ1ELcm03mIKt_JH9?E1Rg$2RW<e;hnnFiVD((+bt%
z$z-)$DV1L|RYNZ>MYUDUw4TN(o(Mi(x2&?s0u33ncXomu?8-TLAN%$_c`tkYqTJc8
zmF5aYovn1BhZ4C;!Au$2G5`-nOYTsDBQ>ZG)@-VQ^6|xinr3K4ODnM(JHb$66zyX5
z4isjW&dZY80@KY(-D<^Irz%<`HuAiQaj|UHEbPqW0yI2|Jt#{Ef$n22-zq<JL59X5
z4mb2iBDhe)HLI$d3ow+A)lcB4*WrxqA05SJ-7xTh15NBK=wM%eA&1%0SJLjO78SA9
zHq5d29KOss_|M}26)g=Qg3SwPjC~-WP-p7_`*b7_MlGmFgg5*BXvl8%!+*B&x75Y%
zyekK~a<<n>p&E^0n=>9~Z|(%g1jyg*1dl>)45H^yJnkClTE|XbllQ$4De0@8?clRj
z&`qt1>xNhR_Z60_uCp-cK661Jf7}!0Dvmm@%VU|@mO|tCDZOSjZ;NBh|6(Q_6Jzuv
zxtmRGOM4pE(Sr=%l)4}GT#gtzKIGouLGN}9=$5w3zT~Lk+fqOK{-zY%?--W6|2yzL
zfLLsVT`mVgjZM_c-TNF7&J}9>gs>l;o;|xQ^{_r4lDNmjhx&M)_MsThr+w%Vo-g{)
zD9^w7&@((I1k}&-oPboG-xtuM37E!z>sT{tn)mwb(mnUaz5y5mO7NqDF1k0;EIUKE
z752b&cjspI!&`EcUG}36j*Q=yqP7u-|BDgLnIN*c_vW7aS?WD=%a0&rh`kV9Tetk(
HXGi`4Q~eK9

delta 730
zcmYk1OK1~O6o$#n?PQXslbcM^lp>XgSrqTWM<YrWa%S>ytZ59PjTI3hrc$-V7HUE_
ztq?4@2ngEa!ljGii!7u;a3g{{6}Li(?yL_)&_!LS=T0ni@m-kzo_qdpzTGVT{Bvr#
z;b|xh^(ni*rZ_fU?`KJ+?ySx${TO_pa5fGL4*rO-Jbs^0{B8cS=Z>mea`4w9)>v}D
zP74PBL<XQNN&qEM1*nRe1@^2h(~H)Q_%g+HH?HnTXDD5C)3V4x<}@8p5e0zra>0xx
zY_O-OCS9fPjN2uT^vRUGFNtXjVA>K#EJ)8=U7c+w5M{_rY%6BR<pU6T$W7tL3^SLi
zvzCks+dGPIq3#OLS!6-2q~aFJYRHSC>?556vd12g(&?nDUg-{ybwN%Q#U$8dGYa4?
zp?&03kxQ@s|J4lGIQoQLQA=<J<2ja49mt|*j3s*VaL`(8$6Ktad7PEjIwN`rjqnmW
z;UoM+FA*U62&3Iv4=x<XTVI1wO#cmb@T|(CILG)PHdVe4pR2r#zi)>O+{^e0e9QO%
z9@F?PJg3p^J&o_d7aC9CrpAX>-x&-iqh>GOeQzW%>E*+?dn=^jSS+C9w3m-y_Ep%x
zH7`GeN1ufQSg4sAe)jSRKJ-NVn6H^S_UZgE+BGwbk9F?FNu9^Kx35#7f$ob<g>%f+
zOhb+&b_{>gc@VGd4-DdmH$EMghsfo|7bA|whGC*_%NSni_&5<F!i3rG_#(~JKPHRf
AX#fBK

diff --git a/netbox/project-static/src/search.ts b/netbox/project-static/src/search.ts
index d01bc744a..59b668cc0 100644
--- a/netbox/project-static/src/search.ts
+++ b/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 };
-}
-
-function isSearchButton(el: any): el is SearchFilterButton {
-  return el?.dataset?.searchValue ?? null !== null;
+/**
+ * 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;
+
+  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));
     }
   }
 }
diff --git a/netbox/templates/layout.html b/netbox/templates/layout.html
index a874b143d..3cac647e3 100644
--- a/netbox/templates/layout.html
+++ b/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>
diff --git a/netbox/utilities/templates/search/searchbar.html b/netbox/utilities/templates/search/searchbar.html
index 60e89dee1..8d59990cc 100644
--- a/netbox/utilities/templates/search/searchbar.html
+++ b/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