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/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
@@ -71,7 +71,7 @@ export class DynamicTomSelect extends TomSelect {
     this.addEventListeners();
   }
 
-  load(value: string, preserveValue?: string | string[]) {
+  load(value: string) {
     const self = this;
 
     // Automatically clear any cached options. (Only options included
@@ -107,14 +107,6 @@ export class DynamicTomSelect extends TomSelect {
       // Pass the options to the callback function
       .then(options => {
         self.loadCallback(options, []);
-        // Restore the previous selection if it is still valid under the new filter.
-        if (preserveValue !== undefined) {
-          const values = Array.isArray(preserveValue) ? preserveValue : [preserveValue];
-          const validValues = values.filter(v => v !== '' && v in self.options);
-          if (validValues.length > 0) {
-            self.setValue(validValues.length === 1 ? validValues[0] : validValues, true);
-          }
-        }
       })
       .catch(() => {
         self.loadCallback([], []);
@@ -346,9 +338,6 @@ export class DynamicTomSelect extends TomSelect {
   private handleEvent(event: Event): void {
     const target = event.target as HTMLSelectElement;
 
-    // Save the current selection so we can restore it after loading if it remains valid.
-    const previousValue = this.getValue();
-
     // Update the element's URL after any changes to a dependency.
     this.updateQueryParams(target.name);
     this.updatePathValues(target.name);
@@ -356,8 +345,7 @@ export class DynamicTomSelect extends TomSelect {
     // Clear any previous selection(s) as the parent filter has changed
     this.clear();
 
-    // Load new data, restoring the previous selection if it is still valid under the new filter.
-    const preserve = previousValue !== '' && previousValue !== null ? previousValue : undefined;
-    this.load(this.lastValue, preserve);
+    // Load new data.
+    this.load(this.lastValue);
   }
 }

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: {