fix(core/menu-avatar-item): use host for trigger target

packages/core/src/components/dropdown/dropdown-controller.ts

@@ -96,10 +96,10 @@ class DropdownController {
     }
   }
 
-  dismissAll(includeUids?: string[]) {
+  dismissAll(ignoreBehaviorForIds: string[] = []) {
     this.dropdowns.forEach((dropdown) => {
       if (
-        !includeUids?.includes(dropdown.getId()) &&
+        !ignoreBehaviorForIds.includes(dropdown.getId()) &&
         (dropdown.closeBehavior === 'inside' ||
           dropdown.closeBehavior === false)
       ) {
@@ -115,7 +115,6 @@ class DropdownController {
 
     this.dropdowns.forEach((dropdown) => {
       if (
-        dropdown.isPresent() &&
         dropdown.closeBehavior !== 'inside' &&
         dropdown.closeBehavior !== false &&
         !path.has(dropdown.getId())
@@ -126,10 +125,15 @@ class DropdownController {
   }
 
   pathIncludesTrigger(eventTargets: EventTarget[]) {
-    return !!eventTargets.find(
-      (element: HTMLElement) =>
-        !!element.hasAttribute?.('data-ix-dropdown-trigger')
-    );
+    for (let eventTarget of eventTargets) {
+      if (eventTarget instanceof HTMLElement) {
+        if (eventTarget.hasAttribute('data-ix-dropdown-trigger')) {
+          return true;
+        }
+      }
+    }
+
+    return false;
   }
 
   private pathIncludesDropdown(eventTargets: EventTarget[]) {

packages/core/src/components/dropdown/dropdown.tsx

@@ -213,10 +213,16 @@ export class Dropdown implements ComponentInterface, DropdownInterface {
       this.triggerElement,
       'click',
       (event: PointerEvent) => {
-        if (!event.defaultPrevented) toggleController();
+        if (!event.defaultPrevented) {
+          toggleController();
+        }
       }
     );
-    this.triggerElement.setAttribute('data-ix-dropdown-trigger', this.localUId);
+
+    this.triggerElement?.setAttribute(
+      'data-ix-dropdown-trigger',
+      this.localUId
+    );
   }
 
   /** @internal */
@@ -255,8 +261,6 @@ export class Dropdown implements ComponentInterface, DropdownInterface {
       const dropdownItem = await element.getDropdownItemElement();
       dropdownItem.isSubMenu = true;
       this.hostElement.style.zIndex = `var(--theme-z-index-dropdown)`;
-
-      return dropdownItem;
     }
 
     if (element.tagName === 'IX-DROPDOWN-ITEM') {
@@ -419,7 +423,9 @@ export class Dropdown implements ComponentInterface, DropdownInterface {
     if (dropdownController.pathIncludesTrigger(event.composedPath())) {
       event.preventDefault();
 
-      if (this.isTriggerElement(event.target as HTMLElement)) return;
+      if (this.isTriggerElement(event.target as HTMLElement)) {
+        return;
+      }
     }
 
     if (this.closeBehavior === 'inside' || this.closeBehavior === 'both') {

packages/core/src/components/menu-avatar-item/test/menu-avatar-item.ct.ts

@@ -0,0 +1,55 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { expect } from '@playwright/test';
+import { test } from '@utils/test';
+
+const html = String.raw;
+
+test('Nested dropdowns', async ({ mount, page }) => {
+  await mount(html`
+    <ix-menu>
+      <ix-menu-avatar>
+        <ix-menu-avatar-item label="test" id="submenu-01"></ix-menu-avatar-item>
+      </ix-menu-avatar>
+    </ix-menu>
+    <ix-dropdown trigger="submenu-01" id="d1">
+      <ix-dropdown-item>SubMenuItem 1</ix-dropdown-item>
+      <ix-dropdown-item>SubMenuItem 2</ix-dropdown-item>
+      <ix-dropdown-item>SubMenuItem 3</ix-dropdown-item>
+      <ix-dropdown-item id="submenu-02">SubMenuItem 4</ix-dropdown-item>
+    </ix-dropdown>
+    <ix-dropdown trigger="submenu-02" id="d2">
+      <ix-dropdown-item>SubMenuItem 1</ix-dropdown-item>
+      <ix-dropdown-item>SubMenuItem 2</ix-dropdown-item>
+      <ix-dropdown-item>SubMenuItem 3</ix-dropdown-item>
+      <ix-dropdown-item>SubMenuItem 4</ix-dropdown-item>
+    </ix-dropdown>
+  `);
+
+  const menuAvatar = page.locator('ix-menu-avatar');
+  await expect(menuAvatar).toBeVisible();
+  await menuAvatar.click();
+
+  await expect(menuAvatar.locator('ix-dropdown')).toBeVisible();
+
+  const menuAvatarItem = menuAvatar.locator('ix-menu-avatar-item').nth(0);
+  await menuAvatarItem.click();
+
+  const dropdown1 = page.locator('#d1');
+  const dropdown2 = page.locator('#d2');
+
+  await expect(dropdown1).toBeVisible();
+
+  const dropdown2Trigger = dropdown1
+    .locator('ix-dropdown-item')
+    .filter({ hasText: 'SubMenuItem 4' });
+  await dropdown2Trigger.click();
+
+  await expect(dropdown2).toBeVisible();
+});