Fix initialization of TomSelect dropdowns after HTMX loading

netbox/project-static/src/htmx.ts

@@ -1,4 +1,3 @@
-import { getElements, isTruthy } from './util';
 import { initButtons } from './buttons';
 import { initSelects } from './select';
 import { initObjectSelector } from './objectSelector';
@@ -15,16 +14,5 @@ function initDepedencies(): void {
  * elements.
  */
 export function initHtmx(): void {
-  for (const element of getElements('[hx-target]')) {
+  document.addEventListener('htmx:afterSettle', initDepedencies);
-    const targetSelector = element.getAttribute('hx-target');
-    if (isTruthy(targetSelector)) {
-      for (const target of getElements(targetSelector)) {
-        target.addEventListener('htmx:afterSettle', initDepedencies);
-      }
-    }
-  }
-
-  for (const element of getElements('[hx-trigger=load]')) {
-    element.addEventListener('htmx:afterSettle', initDepedencies);
-  }
 }

netbox/project-static/src/select/dynamic.ts

@@ -42,7 +42,7 @@ function renderItem(data: TomOption, escape: typeof escape_html) {
 
 // Initialize <select> elements which are populated via a REST API call
 export function initDynamicSelects(): void {
-  for (const select of getElements<HTMLSelectElement>('select.api-select')) {
+  for (const select of getElements<HTMLSelectElement>('select:not(.tomselected).api-select')) {
     new DynamicTomSelect(select, {
       ...config,
       valueField: VALUE_FIELD,

netbox/project-static/src/select/static.ts

@@ -7,7 +7,7 @@ import { getElements } from '../util';
 // Initialize <select> elements with statically-defined options
 export function initStaticSelects(): void {
   for (const select of getElements<HTMLSelectElement>(
-    'select:not(.api-select):not(.color-select)',
+    'select:not(.tomselected):not(.api-select):not(.color-select)',
   )) {
     new TomSelect(select, {
       ...config,
@@ -23,7 +23,7 @@ export function initColorSelects(): void {
     )}"></span> ${escape(item.text)}</div>`;
   }
 
-  for (const select of getElements<HTMLSelectElement>('select.color-select')) {
+  for (const select of getElements<HTMLSelectElement>('select:not(.tomselected).color-select')) {
     new TomSelect(select, {
       ...config,
       render: {