fix(core/menu-category): fix unwanted behavior with active element (#…

…1102) Co-authored-by: Lukas Maurer <lukas.maurer@siemens.com>
siemens · Feb 26, 2024 · 99a9c5c · 99a9c5c
1 parent 03790e0
commit 99a9c5c
Show file tree

Hide file tree

Showing 9 changed files with 121 additions and 5 deletions.
diff --git a/packages/core/src/components/menu-category/menu-category.scss b/packages/core/src/components/menu-category/menu-category.scss
@@ -32,7 +32,7 @@
 
   .category-chevron {
     margin-left: auto;
-    margin-right: 0px;
+    margin-right: 0;
     transition: var(--theme-default-time) transform ease-in-out;
   }
 
@@ -42,13 +42,13 @@
 
   .menu-items {
     overflow: hidden;
-    max-height: 0px;
+    max-height: 0;
     transition: var(--theme-default-time) max-height ease-in-out;
-    padding: 0.25rem 0 0.25rem 1.625rem;
   }
 
   .menu-items--expanded {
     max-height: 999999999px;
+    padding: 0.25rem 0 0.25rem 1.625rem;
   }
 
   .menu-items--collapsed {

diff --git a/packages/core/src/components/menu-category/menu-category.tsx b/packages/core/src/components/menu-category/menu-category.tsx
@@ -122,13 +122,18 @@ export class MenuCategory {
     return this.menuExpand && (this.showItems || this.isNestedItemActive());
   }
 
-  componentDidLoad() {
+  componentWillLoad() {
     const closestMenu = closestIxMenu(this.hostElement);
     if (!closestMenu) {
       throw Error('ix-menu-category can only be used as a child of ix-menu');
     }
     this.ixMenu = closestMenu;
 
+    this.menuExpand = this.ixMenu.expand;
+    this.showItems = this.isCategoryItemListVisible();
+  }
+
+  componentDidLoad() {
     this.observer = createMutationObserver(() => this.onNestedItemsChanged());
     this.observer.observe(this.hostElement, {
       attributes: true,
@@ -144,12 +149,19 @@ export class MenuCategory {
       'expandChange',
       ({ detail: menuExpand }: CustomEvent<boolean>) => {
         this.menuExpand = menuExpand;
-
+        if (!menuExpand) {
+          this.clearMenuItemStyles();
+        }
         this.showItems = this.isCategoryItemListVisible();
       }
     );
   }
 
+  clearMenuItemStyles() {
+    this.menuItemsContainer.style.removeProperty('max-height');
+    this.menuItemsContainer.style.removeProperty('opacity');
+  }
+
   disconnectedCallback() {
     if (this.observer) {
       this.observer.disconnect();

diff --git a/packages/core/src/components/menu-category/test/menu-category.ct.ts b/packages/core/src/components/menu-category/test/menu-category.ct.ts
@@ -201,3 +201,44 @@ test('should hide menu-items when collapsed', async ({ mount, page }) => {
   );
   await expect(menuCategory.locator('.menu-items')).toBeHidden();
 });
+
+test('should open category when collapsed initially and active', async ({
+  mount,
+  page,
+}) => {
+  await mount(`
+    <ix-basic-navigation>
+      <ix-menu>
+        <ix-menu-category label="Category label">
+          <ix-menu-item active="true">Test Item 1</ix-menu-item>
+          <ix-menu-item>Test Item 2</ix-menu-item>
+        </ix-menu-category>
+      </ix-menu>
+    </ix-basic-navigation>
+  `);
+
+  await page.waitForSelector('ix-menu');
+  const menu = page.locator('ix-menu');
+  await page
+    .locator('ix-basic-navigation')
+    .evaluate(
+      (menu: HTMLIxBasicNavigationElement) => (menu.breakpoints = ['md'])
+    );
+
+  const menuButton = menu.locator('ix-burger-menu');
+  await menuButton.click();
+
+  const menuCategory = page.locator('ix-menu-category');
+  await expect(menuCategory.locator('.menu-items')).toHaveClass(
+    'menu-items menu-items--expanded'
+  );
+
+  await menuCategory.locator('.category-parent').click();
+  await expect(menuCategory.locator('.menu-items')).toHaveClass(/menu-items/);
+  await menuButton.click();
+  await menuButton.click();
+
+  await expect(menuCategory.locator('.menu-items')).toHaveClass(
+    'menu-items menu-items--expanded'
+  );
+});
diff --git a/packages/core/src/tests/menu/active/index.html b/packages/core/src/tests/menu/active/index.html
@@ -0,0 +1,31 @@
+<!--
+SPDX-FileCopyrightText: 2023 Siemens AG
+
+SPDX-License-Identifier: MIT
+-->
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
+      name="viewport"
+    />
+    <title>Stencil Component Starter</title>
+  </head>
+  <body style="width: 100vw; height: 100vh">
+    <ix-basic-navigation>
+      <ix-menu>
+        <ix-menu-item>Item 1</ix-menu-item>
+        <ix-menu-category label="Category with a long name">
+            <ix-menu-item icon="home" notifications="10">Sub 1</ix-menu-item>
+            <ix-menu-item active="true" notifications="7">Sub 2</ix-menu-item>
+            <ix-menu-item icon="star">Sub 3</ix-menu-item>
+            <ix-menu-item>Sub 4</ix-menu-item>
+        </ix-menu-category>
+      </ix-menu>
+    </ix-basic-navigation>
+    <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
+  </body>
+</html>
diff --git a/packages/core/src/tests/menu/menu.e2e.ts b/packages/core/src/tests/menu/menu.e2e.ts
@@ -63,4 +63,36 @@ test.describe('menu', () => {
       await expect(page).toHaveScreenshot();
     }
   );
+
+  regressionTest(
+    'category open on expand when initially closed and activated',
+    async ({ page }) => {
+      await page.setViewportSize(viewPorts.lg);
+      await page.goto('menu/active');
+
+      const basicNavigationElement = page.locator('ix-basic-navigation');
+
+      const category = page.locator('ix-menu-category');
+      await category.click();
+      await page.waitForTimeout(1000);
+
+      const collapseButton = page.getByRole('button', {
+        name: 'Double Chevron Left',
+      });
+      await collapseButton.click();
+      await page.waitForTimeout(1000);
+
+      const expandButton = page.getByRole('button', {
+        name: 'Double Chevron Right',
+      });
+      await expandButton.click();
+      await page.waitForTimeout(1000);
+
+      expect(
+        await basicNavigationElement.screenshot({
+          animations: 'disabled',
+        })
+      ).toMatchSnapshot();
+    }
+  );
 });
diff --git a/...menu/menu.e2e.ts-snapshots/menu-basic-1-chromium---theme-classic-dark-linux.png b/...menu/menu.e2e.ts-snapshots/menu-basic-1-chromium---theme-classic-dark-linux.png
diff --git a/...enu/menu.e2e.ts-snapshots/menu-basic-1-chromium---theme-classic-light-linux.png b/...enu/menu.e2e.ts-snapshots/menu-basic-1-chromium---theme-classic-light-linux.png
diff --git a/...d-when-initially-closed-and-activated-1-chromium---theme-classic-dark-linux.png b/...d-when-initially-closed-and-activated-1-chromium---theme-classic-dark-linux.png
diff --git a/...-when-initially-closed-and-activated-1-chromium---theme-classic-light-linux.png b/...-when-initially-closed-and-activated-1-chromium---theme-classic-light-linux.png