review changes

netbox/dcim/forms/model_forms.py

@@ -20,7 +20,9 @@ from utilities.forms.fields import (
     DynamicModelChoiceField, DynamicModelMultipleChoiceField, JSONField, NumericArrayField, SlugField,
 )
 from utilities.forms.rendering import FieldSet, InlineFields, TabbedGroups
-from utilities.forms.widgets import APISelect, ClearableFileInput, HTMXSelect, NumberWithOptions, SelectWithPK
+from utilities.forms.widgets import (
+    APISelect, ClearableFileInput, ClearableSelect, HTMXSelect, NumberWithOptions, SelectWithPK,
+)
 from utilities.jsonschema import JSONSchemaProperty
 from virtualization.models import Cluster, VMInterface
 from wireless.models import WirelessLAN, WirelessLANGroup
@@ -592,6 +594,14 @@ class DeviceForm(TenancyForm, PrimaryModelForm):
             },
         )
     )
+    face = forms.ChoiceField(
+        label=_('Face'),
+        choices=add_blank_choice(DeviceFaceChoices),
+        required=False,
+        widget=ClearableSelect(
+            requires_fields=['rack']
+        )
+    )
     device_type = DynamicModelChoiceField(
         label=_('Device type'),
         queryset=DeviceType.objects.all(),
@@ -733,10 +743,9 @@ class ModuleForm(ModuleCommonForm, PrimaryModelForm):
     )
     module_bay = DynamicModelChoiceField(
         label=_('Module bay'),
-        queryset=ModuleBay.objects.order_by('name'),
+        queryset=ModuleBay.objects.all(),
         query_params={
-            'device_id': '$device',
-            'ordering': 'name',
+            'device_id': '$device'
         },
         context={
             'disabled': 'installed_module',

netbox/project-static/src/forms/clearField.ts

@@ -0,0 +1,40 @@
+import TomSelect from 'tom-select';
+import { getElements } from '../util';
+
+/**
+ * Initialize clear-field dependencies.
+ * When a required field is cleared, dependent fields with data-requires-fields attribute will also be cleared.
+ */
+export function initClearField(): void {
+  // Find all fields with data-requires-fields attribute
+  for (const field of getElements<HTMLSelectElement>('[data-requires-fields]')) {
+    const requiredFieldsAttr = field.getAttribute('data-requires-fields');
+    if (!requiredFieldsAttr) continue;
+
+    // Parse the comma-separated list of required field names
+    const requiredFields = requiredFieldsAttr.split(',').map(name => name.trim());
+
+    // Set up listeners for each required field
+    for (const requiredFieldName of requiredFields) {
+      const requiredField = document.querySelector<HTMLSelectElement>(
+        `[name="${requiredFieldName}"]`,
+      );
+      if (!requiredField) continue;
+
+      // Listen for changes on the required field
+      requiredField.addEventListener('change', () => {
+        // If required field is cleared, also clear this dependent field
+        if (!requiredField.value || requiredField.value === '') {
+          // Check if this field uses TomSelect
+          const tomselect = (field as HTMLSelectElement & { tomselect?: TomSelect }).tomselect;
+          if (tomselect) {
+            tomselect.clear();
+          } else {
+            // Regular select field
+            field.value = '';
+          }
+        }
+      });
+    }
+  }
+}

netbox/project-static/src/forms/index.ts

@@ -1,9 +1,10 @@
+import { initClearField } from './clearField';
 import { initFormElements } from './elements';
 import { initFilterModifiers } from './filterModifiers';
 import { initSpeedSelector } from './speedSelector';
 
 export function initForms(): void {
-  for (const func of [initFormElements, initSpeedSelector, initFilterModifiers]) {
+  for (const func of [initFormElements, initSpeedSelector, initFilterModifiers, initClearField]) {
     func();
   }
 }

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

@@ -75,16 +75,10 @@ export class DynamicTomSelect extends TomSelect {
   load(value: string) {
     const self = this;
 
-    // Save current selection before clearing
-    const currentValue = self.getValue();
-
     // Automatically clear any cached options. (Only options included
     // in the API response should be present.)
     self.clearOptions();
 
-    // Clear user_options to prevent the pre-selected option from being treated specially
-    (self as any).user_options = {};
-
     // Populate the null option (if any) if not searching
     if (self.nullOption && !value) {
       self.addOption(self.nullOption);
@@ -104,29 +98,16 @@ export class DynamicTomSelect extends TomSelect {
       .then(response => response.json())
       .then(apiData => {
         const results: Dict[] = apiData.results;
-
-        // Add options and manually set $order to ensure correct sorting
-        results.forEach((result, index) => {
+        const options: Dict[] = [];
+        for (const result of results) {
           const option = self.getOptionFromData(result);
-          self.addOption(option);
-          // Set $order after addOption() to override any special handling of pre-selected items
-          const key = option[self.settings.valueField as string] as string;
-          if (self.options[key]) {
-            (self.options[key] as any).$order = index;
+          options.push(option);
         }
-        });
-
-        self.loading--;
-        if (self.loading === 0) {
-          self.wrapper.classList.remove(self.settings.loadingClass as string);
-        }
-
-        // Restore the current selection
-        if (currentValue && !self.items.includes(currentValue as string)) {
-          self.items.push(currentValue as string);
-        }
-
-        self.refreshOptions(false);
+        return options;
+      })
+      // Pass the options to the callback function
+      .then(options => {
+        self.loadCallback(options, []);
       })
       .catch(() => {
         self.loadCallback([], []);

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

@@ -49,9 +49,6 @@ export function initDynamicSelects(): void {
       labelField: LABEL_FIELD,
       maxOptions: MAX_OPTIONS,
 
-      // Preserve API response order
-      sortField: '$order',
-
       // Disable local search (search is performed on the backend)
       searchField: [],
 

netbox/utilities/forms/widgets/select.py

@@ -5,6 +5,7 @@ from ..utils import add_blank_choice
 
 __all__ = (
     'BulkEditNullBooleanSelect',
+    'ClearableSelect',
     'ColorSelect',
     'HTMXSelect',
     'SelectWithPK',
@@ -28,6 +29,24 @@ class BulkEditNullBooleanSelect(forms.NullBooleanSelect):
         )
 
 
+class ClearableSelect(forms.Select):
+    """
+    A Select widget that will be automatically cleared when one or more required fields are cleared.
+
+    Args:
+        requires_fields: A list of field names that this field depends on. When any of these fields
+                        are cleared, this field will also be cleared automatically via JavaScript.
+    """
+
+    def __init__(self, *args, requires_fields=None, **kwargs):
+        super().__init__(*args, **kwargs)
+        if requires_fields:
+            # Convert list to comma-separated string for the data attribute
+            if isinstance(requires_fields, (list, tuple)):
+                requires_fields = ','.join(requires_fields)
+            self.attrs['data-requires-fields'] = requires_fields
+
+
 class ColorSelect(forms.Select):
     """
     Extends the built-in Select widget to colorize each <option>.