fix(core/menu-category): expand category if nested item becomes active (

#1617)

Co-authored-by: matthiashader <[email protected]>
Co-authored-by: matthias <[email protected]>

.changeset/lemon-monkeys-leave.md

@@ -0,0 +1,5 @@
+---
+"@siemens/ix": patch
+---
+
+Automatically expand **ix-menu-category** if nested menu item becomes active.

packages/core/component-doc.json

@@ -12660,7 +12660,7 @@
               "type": "string"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false
         },
         {
@@ -12681,7 +12681,7 @@
               "type": "string"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false
         },
         {
@@ -12702,7 +12702,7 @@
               "type": "number"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false
         }
       ],

packages/core/src/components.d.ts

@@ -1915,15 +1915,15 @@ export namespace Components {
         /**
           * Icon of the category
          */
-        "icon": string;
+        "icon"?: string;
         /**
           * Display name of the category
          */
-        "label": string;
+        "label"?: string;
         /**
           * Show notification count on the category
          */
-        "notifications": number;
+        "notifications"?: number;
     }
     interface IxMenuExpandIcon {
         /**

packages/core/src/components/menu-category/menu-category.tsx

@@ -34,36 +34,36 @@ const DefaultAnimationTimeout = 150;
   shadow: true,
 })
 export class MenuCategory {
-  @Element() hostElement: HTMLIxMenuCategoryElement;
+  @Element() hostElement!: HTMLIxMenuCategoryElement;
 
   /**
    * Display name of the category
    */
-  @Prop() label: string;
+  @Prop() label?: string;
 
   /**
    * Icon of the category
    */
-  @Prop() icon: string;
+  @Prop() icon?: string;
 
   /**
    * Show notification count on the category
    */
-  @Prop() notifications: number;
+  @Prop() notifications?: number;
 
   /** @internal */
   // eslint-disable-next-line @stencil-community/decorators-style
   @Event({ bubbles: true, cancelable: true })
-  closeOtherCategories: EventEmitter;
+  closeOtherCategories!: EventEmitter;
 
   @State() menuExpand = false;
   @State() showItems = false;
   @State() showDropdown = false;
   @State() nestedItems: HTMLIxMenuItemElement[] = [];
 
-  private observer: MutationObserver;
-  private menuItemsContainer: HTMLDivElement;
-  private ixMenu: HTMLIxMenuElement;
+  private observer?: MutationObserver;
+  private menuItemsContainer?: HTMLDivElement;
+  private ixMenu?: HTMLIxMenuElement;
 
   private enterLeaveDebounce = createEnterLeaveDebounce(
     () => {
@@ -130,7 +130,7 @@ export class MenuCategory {
   }
 
   private onPointerEnter() {
-    if (this.ixMenu.expand) {
+    if (this.ixMenu?.expand) {
       return;
     }
     this.closeOtherCategories.emit();
@@ -144,15 +144,30 @@ export class MenuCategory {
 
   private onCategoryClick(e: MouseEvent) {
     e.stopPropagation();
-    if (this.ixMenu.expand) {
-      e?.stopPropagation();
+    if (this.ixMenu?.expand) {
       this.onExpandCategory(!this.showItems);
       return;
     }
   }
 
-  private onNestedItemsChanged() {
+  private onNestedItemsChanged(mutations?: MutationRecord[]) {
     this.nestedItems = this.getNestedItems();
+
+    if (!this.menuExpand || this.showItems || !mutations) {
+      return;
+    }
+
+    for (const mutation of mutations ?? []) {
+      if (
+        mutation.attributeName === 'class' &&
+        mutation.target instanceof HTMLElement &&
+        mutation.target.classList.contains('active')
+      ) {
+        this.showItems = true;
+        this.onExpandCategory(true);
+        return;
+      }
+    }
   }
 
   private isCategoryItemListVisible() {
@@ -171,7 +186,10 @@ export class MenuCategory {
   }
 
   componentDidLoad() {
-    this.observer = createMutationObserver(() => this.onNestedItemsChanged());
+    this.observer = createMutationObserver((mutations: MutationRecord[]) =>
+      this.onNestedItemsChanged(mutations)
+    );
+
     this.observer.observe(this.hostElement, {
       attributes: true,
       childList: true,
@@ -182,7 +200,7 @@ export class MenuCategory {
       this.onNestedItemsChanged();
     });
 
-    this.ixMenu.addEventListener(
+    this.ixMenu?.addEventListener(
       'expandChange',
       ({ detail: menuExpand }: CustomEvent<boolean>) => {
         this.menuExpand = menuExpand;
@@ -195,8 +213,8 @@ export class MenuCategory {
   }
 
   clearMenuItemStyles() {
-    this.menuItemsContainer.style.removeProperty('max-height');
-    this.menuItemsContainer.style.removeProperty('opacity');
+    this.menuItemsContainer?.style.removeProperty('max-height');
+    this.menuItemsContainer?.style.removeProperty('opacity');
   }
 
   disconnectedCallback() {

packages/core/src/tests/menu/menu.e2e.ts

@@ -111,6 +111,22 @@ test.describe('menu', () => {
     }
   );
 
+  regressionTest(
+    'expands category if nested item becomes active',
+    async ({ page }) => {
+      await page.goto('menu/basic');
+      await page.locator('ix-menu-expand-icon').click();
+      await page
+        .locator('ix-menu-item')
+        .nth(2)
+        .evaluate((el: HTMLIxMenuItemElement) => (el.active = true));
+
+      await expect(page).toHaveScreenshot({
+        animations: 'disabled',
+      });
+    }
+  );
+
   regressionTest(
     'show scrollbar on overflow on expand on lg',
     async ({ page }) => {