fix(core/menu-category): make sure to not close itself during touch i…

.changeset/tall-badgers-reply.md

@@ -0,0 +1,7 @@
+---
+'@siemens/ix': patch
+---
+
+Prevent **ix-menu-category** from closing its dropdown during touch interaction.
+
+Fixes #2679

packages/core/src/components.d.ts

@@ -6131,7 +6131,7 @@ declare global {
         new (): HTMLIxMenuAvatarItemElement;
     };
     interface HTMLIxMenuCategoryElementEventMap {
-        "closeOtherCategories": any;
+        "closeOtherCategories": string;
     }
     interface HTMLIxMenuCategoryElement extends Components.IxMenuCategory, HTMLStencilElement {
         addEventListener<K extends keyof HTMLIxMenuCategoryElementEventMap>(type: K, listener: (this: HTMLIxMenuCategoryElement, ev: IxMenuCategoryCustomEvent<HTMLIxMenuCategoryElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -9943,7 +9943,7 @@ declare namespace LocalJSX {
           * Show notification count on the category
          */
         "notifications"?: number;
-        "onCloseOtherCategories"?: (event: IxMenuCategoryCustomEvent<any>) => void;
+        "onCloseOtherCategories"?: (event: IxMenuCategoryCustomEvent<string>) => void;
         /**
           * Will be shown as tooltip text, if not provided menu text content will be used.
           * @since 4.0.0

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

@@ -81,7 +81,7 @@ export class MenuCategory
 
   /** @internal */
   @Event({ bubbles: true, cancelable: true })
-  closeOtherCategories!: EventEmitter;
+  closeOtherCategories!: EventEmitter<string>;
 
   @State() menuExpand = false;
   @State() showItems = false;
@@ -171,7 +171,7 @@ export class MenuCategory
     if (this.ixMenu?.expand) {
       return;
     }
-    this.closeOtherCategories.emit();
+    this.closeOtherCategories.emit(this.categoryId);
 
     if (this.dropdownRef.current) {
       const ref = dropdownController.getDropdownById(
@@ -185,7 +185,11 @@ export class MenuCategory
   }
 
   @Listen('closeOtherCategories', { target: 'window' })
-  private hideMenuItemDropdown() {
+  private hideMenuItemDropdown(event?: CustomEvent<string>) {
+    if (event?.detail === this.categoryId) {
+      return;
+    }
+
     if (this.dropdownRef.current) {
       const ref = dropdownController.getDropdownById(
         this.dropdownRef.current.dataset.ixDropdown!

packages/core/src/components/menu-category/test/menu-category.ct.ts

@@ -8,6 +8,22 @@
  */
 import { regressionTest, test, expect } from '@utils/test';
 
+regressionTest('accessibility', async ({ mount, makeAxeBuilder }) => {
+  await mount(`
+    <ix-application>
+      <ix-menu>
+        <ix-menu-category label="Category label">
+          <ix-menu-item>Test</ix-menu-item>
+          <ix-menu-item>Test</ix-menu-item>
+        </ix-menu-category>
+      </ix-menu>
+    </ix-application>
+  `);
+
+  const accessibilityScanResults = await makeAxeBuilder().analyze();
+  expect(accessibilityScanResults.violations).toEqual([]);
+});
+
 regressionTest('renders', async ({ mount, page }) => {
   await mount(`
     <ix-application>
@@ -129,6 +145,71 @@ regressionTest('should show items as dropdown', async ({ mount, page }) => {
   await expect(itemTwo).toBeVisible();
 });
 
+regressionTest(
+  'should not close current category dropdown on own closeOtherCategories event',
+  async ({ mount, page }) => {
+    await mount(`
+      <ix-application>
+        <ix-menu>
+          <ix-menu-category label="Category 1">
+            <ix-menu-item>Item 1</ix-menu-item>
+          </ix-menu-category>
+          <ix-menu-category label="Category 2">
+            <ix-menu-item>Item 2</ix-menu-item>
+          </ix-menu-category>
+        </ix-menu>
+      </ix-application>
+    `);
+
+    await page
+      .locator('ix-application')
+      .evaluate(
+        (menu: HTMLIxApplicationElement) => (menu.breakpoints = ['md'])
+      );
+
+    const categoryOne = page.locator('ix-menu-category').nth(0);
+    const dropdownOne = categoryOne.locator('ix-dropdown');
+
+    await categoryOne.hover();
+    await expect(dropdownOne).toBeVisible();
+
+    const sourceCategoryId = await categoryOne
+      .locator('.category-parent')
+      .getAttribute('id');
+
+    expect(sourceCategoryId).toBeTruthy();
+
+    await page.evaluate((id) => {
+      window.dispatchEvent(
+        new CustomEvent('closeOtherCategories', {
+          detail: id,
+          bubbles: true,
+          composed: true,
+        })
+      );
+    }, sourceCategoryId);
+
+    await expect(dropdownOne).toBeVisible();
+
+    const categoryTwo = page.locator('ix-menu-category').nth(1);
+    const dropdownTwo = categoryTwo.locator('ix-dropdown');
+    await categoryTwo.hover();
+    await expect(dropdownTwo).toBeVisible();
+
+    await page.evaluate((id) => {
+      window.dispatchEvent(
+        new CustomEvent('closeOtherCategories', {
+          detail: id,
+          bubbles: true,
+          composed: true,
+        })
+      );
+    }, sourceCategoryId);
+
+    await expect(dropdownTwo).not.toBeVisible();
+  }
+);
+
 regressionTest(
   'should collapse category after collapse menu',
   async ({ mount, page }) => {