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>
siemens · Sep 23, 2024 · a0316f5 · a0316f5
1 parent 6041b3d
commit a0316f5
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 10 deletions.
diff --git a/.changeset/tricky-hornets-work.md 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
@@ -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
@@ -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 }) => {