#20383 clear rack face if no rack on edit

netbox/dcim/forms/model_forms.py

@@ -722,15 +722,8 @@ class DeviceForm(TenancyForm, PrimaryModelForm):
         if position:
             self.fields['position'].widget.choices = [(position, f'U{position}')]
 
-    def clean(self):
-        super().clean()
-
-        # If rack is cleared, also clear position and face
-        if not self.cleaned_data.get('rack'):
-            self.cleaned_data['position'] = None
-            self.cleaned_data['face'] = ''
-
-        return self.cleaned_data
+        # Clear face field when rack is cleared
+        self.fields['face'].widget.attrs['ts-clear-field'] = 'rack'
 
 
 class ModuleForm(ModuleCommonForm, PrimaryModelForm):

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

@@ -1,3 +1,4 @@
+import TomSelect from 'tom-select';
 import { getElements } from '../util';
 
 function handleFormSubmit(): void {
@@ -8,6 +9,37 @@ 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.
  */
@@ -28,4 +60,7 @@ export function initFormElements(): void {
       });
     }
   }
+
+  // Initialize clear-field dependencies
+  initClearFieldDependencies();
 }