fix: CXSPA-7931 - Group Tree is not part of tab chain

feature-libs/product-configurator/rulebased/components/group-menu/configurator-group-menu.component.spec.ts

@@ -36,6 +36,7 @@ import {
   GROUP_ID_4,
   GROUP_ID_5,
   GROUP_ID_7,
+  GROUP_ID_8,
   PRODUCT_CODE,
   mockRouterState,
   productConfiguration,
@@ -1204,6 +1205,44 @@ describe('ConfiguratorGroupMenuComponent', () => {
         )
       ).toBe(true);
     });
+
+    it('should return `true` because a group with current group ID is part of the sub group hierarchy', () => {
+      expect(
+        component.containsSelectedGroup(
+          mockProductConfiguration.groups[3], // GROUP_ID_5 is parent of GROUP_ID_7 which in turn is parent of GROUP_ID_8
+          GROUP_ID_8
+        )
+      ).toBe(true);
+    });
+  });
+
+  describe('getTabIndex', () => {
+    it('should return `0` because current group id matches group itself', () => {
+      expect(
+        component.getTabIndex(mockProductConfiguration.groups[0], GROUP_ID_1)
+      ).toBe(0);
+    });
+
+    it("should return `-1` because current group id doesn't match group or its children", () => {
+      expect(
+        component.getTabIndex(mockProductConfiguration.groups[0], GROUP_ID_4)
+      ).toBe(-1);
+    });
+
+    it('should return `0` because current group id matches a direct child group id', () => {
+      expect(
+        component.getTabIndex(mockProductConfiguration.groups[2], GROUP_ID_4)
+      ).toBe(0);
+    });
+
+    it('should return `0` because current group id matches a in-direct child group id', () => {
+      expect(
+        component.getTabIndex(
+          mockProductConfiguration.groups[3], // GROUP_ID_5 is parent of GROUP_ID_7 which in turn is parent of GROUP_ID_8
+          GROUP_ID_8
+        )
+      ).toBe(0);
+    });
   });
 
   describe('isGroupSelected', () => {

feature-libs/product-configurator/rulebased/components/group-menu/configurator-group-menu.component.ts

@@ -18,12 +18,12 @@ import {
   ConfiguratorRouterExtractorService,
 } from '@spartacus/product-configurator/common';
 import {
+  BREAKPOINT,
+  BreakpointService,
   DirectionMode,
   DirectionService,
   HamburgerMenuService,
   ICON_TYPE,
-  BREAKPOINT,
-  BreakpointService,
 } from '@spartacus/storefront';
 import { Observable, of } from 'rxjs';
 import { filter, map, switchMap, take } from 'rxjs/operators';
@@ -503,13 +503,11 @@ export class ConfiguratorGroupMenuComponent {
     group: Configurator.Group,
     currentGroupId?: string
   ): boolean {
-    let isCurrentGroupFound = false;
-    group.subGroups?.forEach((subGroup) => {
-      if (this.isGroupSelected(subGroup.id, currentGroupId)) {
-        isCurrentGroupFound = true;
-      }
-    });
-    return isCurrentGroupFound;
+    return !!group.subGroups?.find(
+      (subGroup) =>
+        this.isGroupSelected(subGroup.id, currentGroupId) ||
+        this.containsSelectedGroup(subGroup, currentGroupId)
+    );
   }
 
   /**
@@ -521,14 +519,10 @@ export class ConfiguratorGroupMenuComponent {
    * @returns {number} - tab index
    */
   getTabIndex(group: Configurator.Group, currentGroupId: string): number {
-    if (
-      !this.isGroupSelected(group.id, currentGroupId) &&
-      !this.containsSelectedGroup(group, currentGroupId)
-    ) {
-      return -1;
-    } else {
-      return 0;
-    }
+    const isCurrentGroupPartOfGroupHierarchy =
+      this.isGroupSelected(group.id, currentGroupId) ||
+      this.containsSelectedGroup(group, currentGroupId);
+    return isCurrentGroupPartOfGroupHierarchy ? 0 : -1; // 0 -> add to tab chain, -1 -> remove from tab chain
   }
 
   /**