Merge pull request #7050 from netbox-community/7034-vlangroup-scope-selectors

Fixes #7034: Update VLAN Scope parent selectors and run change handler on load

docs/release-notes/version-3.0.md

@@ -14,6 +14,7 @@
 * [#6982](https://github.com/netbox-community/netbox/issues/6982) - Fix styling of empty dropdown list under dark mode
 * [#6996](https://github.com/netbox-community/netbox/issues/6996) - Global search bar should be full width on mobile
 * [#7001](https://github.com/netbox-community/netbox/issues/7001) - Fix page focus on load
+* [#7034](https://github.com/netbox-community/netbox/issues/7034) - Fix toggling of VLAN group scope selector fields
 
 ---
 

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

@@ -1,4 +1,4 @@
-import { getElements } from '../util';
+import { getElements, toggleVisibility } from '../util';
 
 type ShowHideMap = {
   default: { hide: string[]; show: string[] };
@@ -62,10 +62,13 @@ const showHideMap: ShowHideMap = {
  */
 function toggleParentVisibility(query: string, action: 'show' | 'hide') {
   for (const element of getElements(query)) {
-    if (action === 'show') {
-      element.parentElement?.classList.remove('d-none', 'invisible');
-    } else {
-      element.parentElement?.classList.add('d-none', 'invisible');
+    const parent = element.parentElement?.parentElement as Nullable<HTMLDivElement>;
+    if (parent !== null) {
+      if (action === 'show') {
+        toggleVisibility(parent, 'show');
+      } else {
+        toggleVisibility(parent, 'hide');
+      }
     }
   }
 }
@@ -73,8 +76,7 @@ function toggleParentVisibility(query: string, action: 'show' | 'hide') {
 /**
  * Handle changes to the Scope Type field.
  */
-function handleScopeChange(event: Event) {
-  const element = event.currentTarget as HTMLSelectElement;
+function handleScopeChange(element: HTMLSelectElement) {
   // Scope type's innerText looks something like `DCIM > region`.
   const scopeType = element.options[element.selectedIndex].innerText.toLowerCase();
 
@@ -104,6 +106,7 @@ function handleScopeChange(event: Event) {
  */
 export function initScopeSelector(): void {
   for (const element of getElements<HTMLSelectElement>('#id_scope_type')) {
-    element.addEventListener('change', handleScopeChange);
+    handleScopeChange(element);
+    element.addEventListener('change', () => handleScopeChange(element));
   }
 }