fix(core/dropdown): handle multiple dropdowns at once (#393)

Co-authored-by: Daniel Leroux <[email protected]>
siemens · Feb 22, 2023 · 4ab0246 · 4ab0246
1 parent 2a0591f
commit 4ab0246
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 9 deletions.
diff --git a/packages/core/src/components/dropdown/dropdown.tsx b/packages/core/src/components/dropdown/dropdown.tsx
@@ -258,49 +258,48 @@ export class Dropdown {
     if (
       this.show === false ||
       this.closeBehavior === false ||
-      this.anchorElement === target ||
-      this.triggerElement === target
+      this.anchorElement?.contains(target) ||
+      this.triggerElement?.contains(target)
     ) {
       return;
     }
 
     switch (this.closeBehavior) {
       case 'outside':
         if (!this.dropdownRef.contains(target)) {
-          this.close(event);
+          this.close();
         }
         break;
 
       case 'inside':
         if (this.dropdownRef.contains(target)) {
-          this.close(event);
+          this.close();
         }
         break;
 
       default:
-        this.close(event);
+        this.close();
     }
   }
 
   private toggle(event?: Event) {
     event?.preventDefault();
-    event?.stopPropagation();
 
     this.show = !this.show;
     this.showChanged.emit(this.show);
   }
 
   private open(event?: Event) {
     event?.preventDefault();
-    event?.stopPropagation();
 
     this.show = true;
     this.showChanged.emit(true);
   }
 
   private close(event?: Event) {
-    event?.preventDefault();
-    event?.stopPropagation();
+    if (event?.defaultPrevented) {
+      return;
+    }
 
     this.show = false;
     this.showChanged.emit(false);

diff --git a/packages/core/src/components/dropdown/test/dropdown.e2e.ts b/packages/core/src/components/dropdown/test/dropdown.e2e.ts
@@ -48,4 +48,16 @@ regressionTest.describe('dropdown', () => {
       maxDiffPixelRatio: 0.05,
     });
   });
+
+  regressionTest('handle multiple', async ({ page }) => {
+    await page.goto('dropdown/test/multiple');
+
+    await page.locator('#trigger-a').click();
+    await page.waitForSelector('.dropdown-menu.show');
+
+    await page.locator('#trigger-b').click();
+    await page.waitForSelector('.dropdown-menu.show');
+
+    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
+  });
 });
diff --git a/...ts-snapshots/dropdown-handle-multiple-1-chromium---theme-classic-dark-linux.png b/...ts-snapshots/dropdown-handle-multiple-1-chromium---theme-classic-dark-linux.png
diff --git a/...s-snapshots/dropdown-handle-multiple-1-chromium---theme-classic-light-linux.png b/...s-snapshots/dropdown-handle-multiple-1-chromium---theme-classic-light-linux.png
diff --git a/packages/core/src/components/dropdown/test/multiple/index.html b/packages/core/src/components/dropdown/test/multiple/index.html
@@ -0,0 +1,29 @@
+<!--
+SPDX-FileCopyrightText: 2022 Siemens AG
+
+SPDX-License-Identifier: MIT
+-->
+
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
+    />
+    <title>Stencil Component Starter</title>
+  </head>
+  <body style="width: 100vw; height: 100vh">
+    <ix-button id="trigger-a">Open A</ix-button>
+    <ix-button id="trigger-b">Open B</ix-button>
+    <ix-dropdown trigger="trigger-a">
+      <ix-dropdown-item label="Item 1"></ix-dropdown-item>
+      <ix-dropdown-item label="Item 2"></ix-dropdown-item>
+    </ix-dropdown>
+    <ix-dropdown trigger="trigger-b">
+      <ix-dropdown-item label="Item A"></ix-dropdown-item>
+      <ix-dropdown-item label="Item B"></ix-dropdown-item>
+    </ix-dropdown>
+    <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
+  </body>
+</html>