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(),
@@ -722,9 +732,6 @@ class DeviceForm(TenancyForm, PrimaryModelForm):
         if position:
             self.fields['position'].widget.choices = [(position, f'U{position}')]
 
-        # Clear face field when rack is cleared
-        self.fields['face'].widget.attrs['ts-clear-field'] = 'rack'
-
 
 class ModuleForm(ModuleCommonForm, PrimaryModelForm):
     device = DynamicModelChoiceField(

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/elements.ts

@@ -1,4 +1,3 @@
-import TomSelect from 'tom-select';
 import { getElements } from '../util';
 
 function handleFormSubmit(): void {
@@ -9,37 +8,6 @@ function handleFormSubmit(): void {
   }
 }
 
-/**
- * Initialize clear-field dependencies.
- * When a field with ts-clear-field attribute's parent field is cleared, this field will also be cleared.
- */
-function initClearFieldDependencies(): void {
-  // Find all fields with ts-clear-field attribute
-  for (const field of getElements<HTMLSelectElement>('[ts-clear-field]')) {
-    const parentFieldName = field.getAttribute('ts-clear-field');
-    if (!parentFieldName) continue;
-
-    // Find the parent field
-    const parentField = document.querySelector<HTMLSelectElement>(`[name="${parentFieldName}"]`);
-    if (!parentField) continue;
-
-    // Listen for changes on the parent field
-    parentField.addEventListener('change', () => {
-      // If parent field is cleared, also clear this dependent field
-      if (!parentField.value || parentField.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 = '';
-        }
-      }
-    });
-  }
-}
-
 /**
  * Attach event listeners to each form's submit/reset buttons.
  */
@@ -60,7 +28,4 @@ export function initFormElements(): void {
       });
     }
   }
-
-  // Initialize clear-field dependencies
-  initClearFieldDependencies();
 }

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/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>.