fix(core/dropdown): fix editable dropdown width (#435)

siemens · Mar 9, 2023 · ca2312b · ca2312b
1 parent d658546
commit ca2312b
Show file tree

Hide file tree

Showing 9 changed files with 36 additions and 2 deletions.
diff --git a/packages/core/src/components/select/select.tsx b/packages/core/src/components/select/select.tsx
@@ -368,6 +368,7 @@ export class Select {
                 ? this.selectedItems?.map((item) => (
                     <ix-filter-chip
                       disabled={this.disabled || this.readonly}
+                      key={item.value}
                       onCloseClick={(e) => {
                         e.preventDefault();
                         e.stopPropagation();
@@ -439,9 +440,9 @@ export class Select {
           trigger={this.dropdownWrapperRef}
           onShowChanged={(e) => this.dropdownVisibilityChanged(e)}
           placement="auto-start"
-          overwriteDropdownStyle={async (delegateConfig) => {
+          overwriteDropdownStyle={async () => {
             return {
-              width: `${delegateConfig.triggerRef.clientWidth}px`,
+              width: `${this.hostElement.clientWidth}px`,
             };
           }}
         >

diff --git a/packages/core/src/tests/select/editable/index.html b/packages/core/src/tests/select/editable/index.html
@@ -0,0 +1,24 @@
+<!--
+SPDX-FileCopyrightText: 2023 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="padding: 2rem">
+    <ix-select editable selected-indices="2">
+      <ix-select-item label="Item 1" value="1"></ix-select-item>
+      <ix-select-item label="Item 2" value="2"></ix-select-item>
+      <ix-select-item label="Item 3" value="3"></ix-select-item>
+    </ix-select>
+    <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
+  </body>
+</html>
diff --git a/packages/core/src/tests/select/select.e2e.ts b/packages/core/src/tests/select/select.e2e.ts
@@ -20,6 +20,15 @@ regressionTest.describe('select', () => {
     });
   });
 
+  regressionTest('editable', async ({ page }) => {
+    await page.goto('select/editable');
+    await page.locator('.chevron-down-container').click();
+    await page.waitForSelector('.dropdown-menu.show');
+    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot({
+      maxDiffPixelRatio: 0.05,
+    });
+  });
+
   regressionTest('mode-multiple', async ({ page }) => {
     await page.goto('select/mode-multiple');
     await page.locator('.chevron-down-container').click();

diff --git a/...e2e.ts-snapshots/select-autoplacement-1-chromium---theme-classic-dark-linux.png b/...e2e.ts-snapshots/select-autoplacement-1-chromium---theme-classic-dark-linux.png
diff --git a/...2e.ts-snapshots/select-autoplacement-1-chromium---theme-classic-light-linux.png b/...2e.ts-snapshots/select-autoplacement-1-chromium---theme-classic-light-linux.png
diff --git a/...lect.e2e.ts-snapshots/select-editable-1-chromium---theme-classic-dark-linux.png b/...lect.e2e.ts-snapshots/select-editable-1-chromium---theme-classic-dark-linux.png
diff --git a/...ect.e2e.ts-snapshots/select-editable-1-chromium---theme-classic-light-linux.png b/...ect.e2e.ts-snapshots/select-editable-1-chromium---theme-classic-light-linux.png
diff --git a/...lect.e2e.ts-snapshots/select-overflow-1-chromium---theme-classic-dark-linux.png b/...lect.e2e.ts-snapshots/select-overflow-1-chromium---theme-classic-dark-linux.png
diff --git a/...ect.e2e.ts-snapshots/select-overflow-1-chromium---theme-classic-light-linux.png b/...ect.e2e.ts-snapshots/select-overflow-1-chromium---theme-classic-light-linux.png