fix(core/select): show clear button (#465)

siemens · Mar 30, 2023 · f8e7d93 · f8e7d93
1 parent 715d50d
commit f8e7d93
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 3 deletions.
diff --git a/packages/core/src/components/select/select.tsx b/packages/core/src/components/select/select.tsx
@@ -397,15 +397,14 @@ export class Select {
                   ref={(ref) => (this.inputRef = ref)}
                   onInput={() => this.filterItemsWithTypeahead()}
                 />
-                {this.isMultipleMode &&
-                this.allowClear &&
+                {this.allowClear &&
                 (this.value?.length || this.inputFilterText) ? (
                   <ix-icon-button
                     class="clear"
                     icon="clear"
                     ghost
                     oval
-                    size="24"
+                    size="16"
                     onClick={(e) => {
                       e.preventDefault();
                       e.stopPropagation();

diff --git a/packages/core/src/tests/select/allow-clear/index.html b/packages/core/src/tests/select/allow-clear/index.html
@@ -0,0 +1,25 @@
+<!--
+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>
+    <ix-select allow-clear selected-indices="1">
+      <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-item label="Item 4" value="4"></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
@@ -73,4 +73,13 @@ regressionTest.describe('select', () => {
     await page.waitForSelector('.dropdown-menu.show');
     expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
   });
+
+  regressionTest('allow-clear', async ({ page }) => {
+    await page.goto('select/allow-clear');
+    await page.locator('.chevron-down-container').click();
+    await page.waitForSelector('.dropdown-menu.show');
+    await page.locator('text=Item 2').first().click();
+
+    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
+  });
 });
diff --git a/...t.e2e.ts-snapshots/select-allow-clear-1-chromium---theme-classic-dark-linux.png b/...t.e2e.ts-snapshots/select-allow-clear-1-chromium---theme-classic-dark-linux.png
diff --git a/....e2e.ts-snapshots/select-allow-clear-1-chromium---theme-classic-light-linux.png b/....e2e.ts-snapshots/select-allow-clear-1-chromium---theme-classic-light-linux.png