Fixes #20934: Fix flicker when navigating in dark mode

netbox/dcim/tables/racks.py

@@ -218,7 +218,7 @@ class RackReservationTable(TenancyColumnsMixin, PrimaryModelTable):
     class Meta(PrimaryModelTable.Meta):
         model = RackReservation
         fields = (
-            'pk', 'id', 'reservation', 'site', 'location', 'rack', 'unit_list', 'status', 'user', 'created', 'tenant',
+            'pk', 'id', 'reservation', 'site', 'location', 'rack', 'unit_list', 'status', 'user', 'tenant',
             'tenant_group', 'description', 'comments', 'tags', 'actions', 'created', 'last_updated',
         )
         default_columns = ('pk', 'reservation', 'site', 'rack', 'unit_list', 'status', 'user', 'description')

netbox/project-static/src/colorMode.ts

@@ -20,12 +20,7 @@ function storeColorMode(mode: ColorMode): void {
 }
 
 function updateElements(targetMode: ColorMode): void {
-  const body = document.querySelector('body');
-  if (body && targetMode == 'dark') {
-    body.setAttribute('data-bs-theme', 'dark');
-  } else if (body) {
-    body.setAttribute('data-bs-theme', 'light');
-  }
+  document.documentElement.setAttribute('data-bs-theme', targetMode);
 
   for (const elevation of getElements<HTMLObjectElement>('.rack_elevation')) {
     const svg = elevation.firstElementChild ?? null;

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

@@ -1,16 +1,16 @@
 import type { RecursivePartial, TomOption, TomSettings, TomInput } from 'tom-select/dist/cjs/types';
 import { addClasses } from 'tom-select/src/vanilla.ts';
 import queryString from 'query-string';
+import TomSelect from 'tom-select';
 import type { Stringifiable } from 'query-string';
 import { DynamicParamsMap } from './dynamicParamsMap';
-import { NetBoxTomSelect } from './netboxTomSelect';
 
 // Transitional
 import { QueryFilter, PathFilter } from '../types';
 import { getElement, replaceAll } from '../../util';
 
-// Extends NetBoxTomSelect to provide enhanced fetching of options via the REST API
-export class DynamicTomSelect extends NetBoxTomSelect {
+// Extends TomSelect to provide enhanced fetching of options via the REST API
+export class DynamicTomSelect extends TomSelect {
   public readonly nullOption: Nullable<TomOption> = null;
 
   // Transitional code from APISelect

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

@@ -1,39 +0,0 @@
-import TomSelect from 'tom-select';
-
-/**
- * Extends TomSelect to work around a browser autofill bug where Edge's "last used" autofill
- * simultaneously focuses multiple inputs, triggering a cascading focus/open/blur loop between
- * TomSelect instances.
- *
- * Root cause: TomSelect's open() method calls focus(), which synchronously moves browser focus
- * to this instance's control input, then schedules setTimeout(onFocus, 0). When Edge autofill
- * has moved focus to a *different* select before the timeout fires, the delayed onFocus() call
- * re-steals browser focus back, causing the other instance to blur and close. Each instance's
- * deferred callback then repeats this, creating an infinite ping-pong loop.
- *
- * Fix: in the setTimeout callback, only proceed with onFocus() if this instance's element is
- * still the active element. If focus has already moved elsewhere, skip the call.
- *
- * Upstream bug: https://github.com/orchidjs/tom-select/issues/806
- * NetBox issue:  https://github.com/netbox-community/netbox/issues/20077
- */
-export class NetBoxTomSelect extends TomSelect {
-  focus(): void {
-    if (this.isDisabled || this.isReadOnly) return;
-
-    this.ignoreFocus = true;
-
-    const focusTarget = this.control_input.offsetWidth ? this.control_input : this.focus_node;
-    focusTarget.focus();
-
-    setTimeout(() => {
-      this.ignoreFocus = false;
-      // Only proceed if this instance's element is still the active element. If Edge autofill
-      // (or anything else) has moved focus to a different element in the interim, calling
-      // onFocus() here would steal focus back and restart the cascade loop.
-      if (document.activeElement === focusTarget || this.control.contains(document.activeElement)) {
-        this.onFocus();
-      }
-    }, 0);
-  }
-}

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

@@ -1,6 +1,6 @@
 import { TomOption } from 'tom-select/src/types';
+import TomSelect from 'tom-select';
 import { escape_html } from 'tom-select/src/utils';
-import { NetBoxTomSelect } from './classes/netboxTomSelect';
 import { getPlugins } from './config';
 import { getElements } from '../util';
 
@@ -9,7 +9,7 @@ export function initStaticSelects(): void {
   for (const select of getElements<HTMLSelectElement>(
     'select:not(.tomselected):not(.no-ts):not([size]):not(.api-select):not(.color-select)',
   )) {
-    new NetBoxTomSelect(select, {
+    new TomSelect(select, {
       ...getPlugins(select),
       maxOptions: undefined,
     });
@@ -25,7 +25,7 @@ export function initColorSelects(): void {
   }
 
   for (const select of getElements<HTMLSelectElement>('select.color-select:not(.tomselected)')) {
-    new NetBoxTomSelect(select, {
+    new TomSelect(select, {
       ...getPlugins(select),
       maxOptions: undefined,
       render: {

netbox/project-static/styles/custom/_misc.scss

@@ -112,7 +112,7 @@ img.plugin-icon {
 }
 
 
-body[data-bs-theme=dark] {
+html[data-bs-theme=dark] {
   // Assuming icon is black/white line art, invert it and tone down brightness
   img.plugin-icon {
     filter: grayscale(100%) invert(100%) brightness(80%);

netbox/project-static/styles/overrides/_tabler.scss

@@ -93,7 +93,7 @@ pre {
 }
 
 // Dark mode overrides
-body[data-bs-theme=dark] {
+html[data-bs-theme=dark] {
   // Override background color alpha value
   ::selection {
     background-color: rgba(var(--tblr-primary-rgb),.48);
@@ -174,16 +174,11 @@ pre code {
 }
 
 // Theme-based visibility utilities
-// Tabler's .hide-theme-* utilities expect data-bs-theme on :root, but NetBox applies
-// it to body. These overrides use higher specificity selectors to ensure theme-based
-// visibility works correctly. The :root:not(.dummy) pattern provides the additional
-// specificity needed to override Tabler's :root:not() rules.
-:root:not(.dummy) body[data-bs-theme='light'] .hide-theme-light,
-:root:not(.dummy) body[data-bs-theme='dark'] .hide-theme-dark {
+:root:not(.dummy)[data-bs-theme='light'] .hide-theme-light,
+:root:not(.dummy)[data-bs-theme='dark'] .hide-theme-dark {
   display: none !important;
 }
-
-:root:not(.dummy) body[data-bs-theme='dark'] .hide-theme-light,
-:root:not(.dummy) body[data-bs-theme='light'] .hide-theme-dark {
+:root:not(.dummy)[data-bs-theme='dark'] .hide-theme-light,
+:root:not(.dummy)[data-bs-theme='light'] .hide-theme-dark {
   display: inline-flex !important;
 }

netbox/project-static/styles/transitional/_navigation.scss

@@ -77,13 +77,13 @@
 }
 
 // Light theme styling
-body[data-bs-theme=light] .navbar-vertical.navbar-expand-lg {
+html[data-bs-theme=light] .navbar-vertical.navbar-expand-lg {
   // Background Gradient
   background: linear-gradient(180deg, rgba(0, 133, 125, 0.00) 0%, rgba(0, 133, 125, 0.10) 100%), #FFF;
 }
 
 // Dark theme styling
-body[data-bs-theme=dark] .navbar-vertical.navbar-expand-lg {
+html[data-bs-theme=dark] .navbar-vertical.navbar-expand-lg {
 
   // Background Gradient
   background: linear-gradient(180deg, rgba(0, 242, 212, 0.00) 0%, rgba(0, 242, 212, 0.10) 100%), #001423;

netbox/project-static/styles/transitional/_tables.scss

@@ -59,7 +59,7 @@ table th.orderable a {
   color: var(--#{$prefix}body-color);
 }
 
-body[data-bs-theme=dark] {
+html[data-bs-theme=dark] {
   // Adjust table header background color
   .table thead th, .markdown>table thead th {
     background: $rich-black !important;