Fixes #20077: Fix form field focus bug on Edge

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', 'tenant',
+            'pk', 'id', 'reservation', 'site', 'location', 'rack', 'unit_list', 'status', 'user', 'created', '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,7 +20,12 @@ function storeColorMode(mode: ColorMode): void {
 }
 
 function updateElements(targetMode: ColorMode): void {
-  document.documentElement.setAttribute('data-bs-theme', targetMode);
+  const body = document.querySelector('body');
+  if (body && targetMode == 'dark') {
+    body.setAttribute('data-bs-theme', 'dark');
+  } else if (body) {
+    body.setAttribute('data-bs-theme', 'light');
+  }
 
   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 TomSelect to provide enhanced fetching of options via the REST API
-export class DynamicTomSelect extends TomSelect {
+// Extends NetBoxTomSelect to provide enhanced fetching of options via the REST API
+export class DynamicTomSelect extends NetBoxTomSelect {
   public readonly nullOption: Nullable<TomOption> = null;
 
   // Transitional code from APISelect

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

@@ -0,0 +1,39 @@
+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 TomSelect(select, {
+    new NetBoxTomSelect(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 TomSelect(select, {
+    new NetBoxTomSelect(select, {
       ...getPlugins(select),
       maxOptions: undefined,
       render: {

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

@@ -112,7 +112,7 @@ img.plugin-icon {
 }
 
 
-html[data-bs-theme=dark] {
+body[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
-html[data-bs-theme=dark] {
+body[data-bs-theme=dark] {
   // Override background color alpha value
   ::selection {
     background-color: rgba(var(--tblr-primary-rgb),.48);
@@ -174,11 +174,16 @@ pre code {
 }
 
 // Theme-based visibility utilities
-:root:not(.dummy)[data-bs-theme='light'] .hide-theme-light,
-:root:not(.dummy)[data-bs-theme='dark'] .hide-theme-dark {
+// 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 {
   display: none !important;
 }
-:root:not(.dummy)[data-bs-theme='dark'] .hide-theme-light,
-:root:not(.dummy)[data-bs-theme='light'] .hide-theme-dark {
+
+:root:not(.dummy) body[data-bs-theme='dark'] .hide-theme-light,
+:root:not(.dummy) body[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
-html[data-bs-theme=light] .navbar-vertical.navbar-expand-lg {
+body[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
-html[data-bs-theme=dark] .navbar-vertical.navbar-expand-lg {
+body[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);
 }
 
-html[data-bs-theme=dark] {
+body[data-bs-theme=dark] {
   // Adjust table header background color
   .table thead th, .markdown>table thead th {
     background: $rich-black !important;