Fixes #11753: Avoid re-initializing SlimSelects

netbox/project-static/src/dashboard.ts

@@ -13,6 +13,12 @@ async function saveDashboardLayout(
 }
 
 export function initDashboard(): void {
+  // Exit if this page does not contain a dashboard
+  const dashboard = document.getElementById('dashboard') as Nullable<HTMLDivElement>;
+  if (dashboard == null) {
+    return;
+  }
+
   // Initialize the grid
   let grid = GridStack.init({
     cellHeight: 100,

netbox/project-static/src/htmx.ts

@@ -3,7 +3,6 @@ import { initButtons } from './buttons';
 import { initSelect } from './select';
 
 function initDepedencies(): void {
-  console.log('initDepedencies()');
   for (const init of [initButtons, initSelect]) {
     init();
   }

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

@@ -2,7 +2,7 @@ import { getElements } from '../../util';
 import { APISelect } from './apiSelect';
 
 export function initApiSelect(): void {
-  for (const select of getElements<HTMLSelectElement>('.netbox-api-select')) {
+  for (const select of getElements<HTMLSelectElement>('.netbox-api-select:not([data-ssid])')) {
     new APISelect(select);
   }
 }

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

@@ -40,7 +40,9 @@ function styleContainer(
  * the selected option.
  */
 export function initColorSelect(): void {
-  for (const select of getElements<HTMLSelectElement>('select.netbox-color-select')) {
+  for (const select of getElements<HTMLSelectElement>(
+    'select.netbox-color-select:not([data-ssid])',
+  )) {
     for (const option of select.options) {
       if (canChangeColor(option)) {
         // Get the background color from the option's value.

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

@@ -2,7 +2,7 @@ import SlimSelect from 'slim-select';
 import { getElements } from '../util';
 
 export function initStaticSelect(): void {
-  for (const select of getElements<HTMLSelectElement>('.netbox-static-select')) {
+  for (const select of getElements<HTMLSelectElement>('.netbox-static-select:not([data-ssid])')) {
     if (select !== null) {
       const label = document.querySelector(`label[for="${select.id}"]`) as HTMLLabelElement;
 

netbox/templates/home.html

@@ -24,7 +24,7 @@
 
 {% block content-wrapper %}
   {# Render the user's customized dashboard #}
-  <div class="grid-stack">
+  <div class="grid-stack" id="dashboard">
     {% for widget in dashboard %}
       {% include 'extras/dashboard/widget.html' %}
     {% endfor %}