From 08136ac1f9e407be2552d12b8ec79eaf90dc3522 Mon Sep 17 00:00:00 2001
From: maliming <malimings@gmail.com>
Date: Tue, 6 Oct 2026 15:56:22 +0800
Subject: [PATCH] Fix feature toggle cascade when group display name differs
 from name

---
 .../feature-management/feature-management.component.html  | 8 ++++----
 .../feature-management/feature-management.component.ts    | 6 +++---
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/npm/ng-packs/packages/feature-management/src/lib/components/feature-management/feature-management.component.html b/npm/ng-packs/packages/feature-management/src/lib/components/feature-management/feature-management.component.html
index c9980ab1d50..4cade6ddc14 100644
--- a/npm/ng-packs/packages/feature-management/src/lib/components/feature-management/feature-management.component.html
+++ b/npm/ng-packs/packages/feature-management/src/lib/components/feature-management/feature-management.component.html
@@ -18,7 +18,7 @@ <h3>
                 ngTabList
                 orientation="vertical"
                 selectionMode="follow"
-                [(selectedTab)]="selectedGroupDisplayName"
+                [(selectedTab)]="selectedGroupName"
                 class="nav nav-pills flex-column"
               >
                 @for (group of groups(); track group.name) {
@@ -26,7 +26,7 @@ <h3>
                     ngTab
                     #tab="ngTab"
                     type="button"
-                    [value]="group.displayName"
+                    [value]="group.name"
                     class="nav-link text-start"
                     [class.active]="tab.selected()"
                   >
@@ -43,9 +43,9 @@ <h3>
 
             <div class="col-md-8">
               @for (group of groups(); track group.name) {
-                <div ngTabPanel [value]="group.displayName">
+                <div ngTabPanel [value]="group.name">
                   <ng-template ngTabContent>
-                    <h4>{{ selectedGroupDisplayName() }}</h4>
+                    <h4>{{ group.displayName }}</h4>
                     <hr class="mt-2 mb-3" />
 
                     @for (
diff --git a/npm/ng-packs/packages/feature-management/src/lib/components/feature-management/feature-management.component.ts b/npm/ng-packs/packages/feature-management/src/lib/components/feature-management/feature-management.component.ts
index ce44e46d55d..abfd41dd446 100644
--- a/npm/ng-packs/packages/feature-management/src/lib/components/feature-management/feature-management.component.ts
+++ b/npm/ng-packs/packages/feature-management/src/lib/components/feature-management/feature-management.component.ts
@@ -89,7 +89,7 @@ export class FeatureManagementComponent {
   // Internal state
   protected readonly _visible = signal(false);
 
-  protected readonly selectedGroupDisplayName = signal<string | undefined>(undefined);
+  protected readonly selectedGroupName = signal<string | undefined>(undefined);
 
   protected readonly groups = signal<Pick<FeatureGroupDto, 'name' | 'displayName'>[]>([]);
 
@@ -147,7 +147,7 @@ export class FeatureManagementComponent {
       if (!res.groups?.length) return;
       const groups = res.groups.map(({ name, displayName }) => ({ name, displayName }));
       this.groups.set(groups);
-      this.selectedGroupDisplayName.set(groups[0].displayName);
+      this.selectedGroupName.set(groups[0].name);
       this.features.set(
         res.groups.reduce(
           (acc, val) => ({
@@ -292,7 +292,7 @@ export class FeatureManagementComponent {
   }
 
   private getCurrentGroup() {
-    const selectedGroup = this.selectedGroupDisplayName();
+    const selectedGroup = this.selectedGroupName();
     return selectedGroup ? this.features()[selectedGroup] ?? [] : [];
   }