From a0316f59944dc93e8bc1e0009e8a45c9ad4f275f Mon Sep 17 00:00:00 2001
From: Lukas Maurer <lukas.maurer@siemens.com>
Date: Mon, 23 Sep 2024 12:38:04 +0200
Subject: [PATCH] fix(core/dropdown): clean up disconnected dropdowns (#1483)

Co-authored-by: AndreasBerliner <41509230+AndreasBerliner@users.noreply.github.com>
Co-authored-by: Daniel Leroux <daniel.leroux@siemens.com>
---
 .changeset/tricky-hornets-work.md             |  5 +++
 .../dropdown/dropdown-controller.ts           | 18 ++++++++++-
 .../components/dropdown/test/dropdown.ct.ts   | 32 +++++++++++++------
 3 files changed, 45 insertions(+), 10 deletions(-)
 create mode 100644 .changeset/tricky-hornets-work.md

diff --git a/.changeset/tricky-hornets-work.md b/.changeset/tricky-hornets-work.md
new file mode 100644
index 0000000000..b4b07aa49b
--- /dev/null
+++ b/.changeset/tricky-hornets-work.md
@@ -0,0 +1,5 @@
+---
+"@siemens/ix": patch
+---
+
+fix(core/dropdown): clean up disconnected dropdowns
diff --git a/packages/core/src/components/dropdown/dropdown-controller.ts b/packages/core/src/components/dropdown/dropdown-controller.ts
index 8f1336f8df..b0d356d102 100644
--- a/packages/core/src/components/dropdown/dropdown-controller.ts
+++ b/packages/core/src/components/dropdown/dropdown-controller.ts
@@ -65,7 +65,23 @@ class DropdownController {
   }
 
   disconnected(dropdown: DropdownInterface) {
-    this.dropdowns.delete(dropdown.getId());
+    const id = dropdown.getId();
+    this.removeFromSubmenuIds(id);
+    this.dropdowns.delete(id);
+  }
+
+  removeFromSubmenuIds(id: string) {
+    this.dropdowns.forEach((dropdown) => {
+      const submenuIds = this.submenuIds[dropdown.getId()];
+      if (submenuIds) {
+        const index = submenuIds.indexOf(id);
+        if (index > -1) {
+          submenuIds.splice(index, 1);
+        }
+      }
+    });
+
+    delete this.submenuIds[id];
   }
 
   discoverSubmenus() {
diff --git a/packages/core/src/components/dropdown/test/dropdown.ct.ts b/packages/core/src/components/dropdown/test/dropdown.ct.ts
index 70fc51582f..8bae36fc26 100644
--- a/packages/core/src/components/dropdown/test/dropdown.ct.ts
+++ b/packages/core/src/components/dropdown/test/dropdown.ct.ts
@@ -1,12 +1,3 @@
-/*
- * 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.
- */
-
 /*
  * SPDX-FileCopyrightText: 2023 Siemens AG
  *
@@ -634,6 +625,29 @@ test.describe('resolve during element connect', () => {
   });
 });
 
+test('Child dropdown disconnects', async ({ mount, page }) => {
+  await mount(`<ix-button id="trigger">Open</ix-icon-button>
+        <ix-dropdown closeBehavior="outside" trigger="trigger">
+          <ix-dropdown-item id="item-1">Item level 1</ix-dropdown-item>
+          <ix-dropdown-button label="Nested">
+            <ix-dropdown-item id="item-1">Item level 2</ix-dropdown-item>
+          </ix-dropdown-button>
+        </ix-dropdown>`);
+  const trigger = page.locator('ix-button').first();
+  await trigger.click();
+  const dropdown = page.locator('ix-dropdown').first();
+
+  await expect(dropdown).toBeVisible();
+
+  await dropdown.evaluate((dd) => {
+    dd.removeChild(dd.querySelector('ix-dropdown-button'));
+  });
+
+  await trigger.click();
+  await trigger.click();
+  await expect(dropdown).toBeVisible();
+});
+
 test.describe('A11y', () => {
   test.describe('Keyboard navigation', () => {
     test.beforeEach(async ({ page, mount }) => {