fix(core/dropdown): fix runtime & detach issues

.changeset/tidy-berries-tan.md

@@ -0,0 +1,5 @@
+---
+'@siemens/ix': patch
+---
+
+fix(core/dropdown): resolve trigger during element connect phase

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

@@ -134,6 +134,10 @@ export class Dropdown implements ComponentInterface, DropdownInterface {
 
   connectedCallback(): void {
     dropdownController.connected(this);
+
+    if (this.trigger != undefined) {
+      this.registerListener(this.trigger);
+    }
   }
 
   @Listen('ix-assign-sub-menu')
@@ -149,8 +153,13 @@ export class Dropdown implements ComponentInterface, DropdownInterface {
   }
 
   disconnectedCallback() {
-    this.disposeListener?.();
+    dropdownController.dismiss(this);
     dropdownController.disconnected(this);
+
+    if (this.disposeListener) {
+      this.disposeListener();
+    }
+
     if (this.autoUpdateCleanup) {
       this.autoUpdateCleanup();
     }
@@ -286,6 +295,10 @@ export class Dropdown implements ComponentInterface, DropdownInterface {
       return Promise.resolve(element);
     }
 
+    if (typeof element != 'string') {
+      return;
+    }
+
     const selector = `#${element}`;
     return new Promise((resolve) => {
       if (document.querySelector(selector)) {
@@ -335,6 +348,9 @@ export class Dropdown implements ComponentInterface, DropdownInterface {
   }
 
   private async applyDropdownPosition() {
+    if (!this.show) {
+      return;
+    }
     if (!this.anchorElement) {
       return;
     }
@@ -380,7 +396,6 @@ export class Dropdown implements ComponentInterface, DropdownInterface {
           this.dropdownRef,
           positionConfig
         );
-
         Object.assign(this.dropdownRef.style, {
           top: '0',
           left: '0',

packages/core/src/components/dropdown/test/dropdown.ct.ts

@@ -571,3 +571,43 @@ test('Nested dropdowns within application-header', async ({ mount, page }) => {
   await expect(submenuDropdown).not.toBeVisible();
   await expect(dropdownOfDropdownButton).not.toBeVisible();
 });
+
+test.describe('resolve during element connect', () => {
+  test.beforeEach(async ({ mount }) => {
+    await mount(`
+    <ix-button id="trigger">Open</ix-button>
+    <ix-dropdown trigger="trigger">
+      <ix-dropdown-item label="Item 1" icon="print"></ix-dropdown-item>
+      <ix-dropdown-item label="Item 2"></ix-dropdown-item>
+      <ix-dropdown-item>Custom</ix-dropdown-item>
+    </ix-dropdown>
+    `);
+  });
+
+  test('attach and detach from dom', async ({ page }) => {
+    await page.evaluate(() => {
+      const dropdown = document.querySelector('ix-dropdown');
+      const mount = document.querySelector('#mount');
+      mount.removeChild(dropdown);
+      mount.append(dropdown);
+    });
+
+    const dropdown = page.locator('ix-dropdown');
+    await page.locator('ix-button').first().click();
+
+    await expect(dropdown).toBeVisible();
+  });
+
+  test('add element within runtime', async ({ page }) => {
+    await page.evaluate(async () => {
+      const divElement = document.createElement('div');
+      const mount = document.querySelector('#mount');
+      mount.appendChild(divElement);
+    });
+
+    const dropdown = page.locator('ix-dropdown');
+    await page.locator('ix-button').first().click();
+
+    await expect(dropdown).toBeVisible();
+  });
+});