fix(core/ix-select): select known items in ediable mode on enter navi…

…gation (#1659)

Co-authored-by: Julian Lamplmair <151610373+jul-lam@users.noreply.github.com>

.changeset/dirty-garlics-unite.md

@@ -0,0 +1,5 @@
+---
+'@siemens/ix': patch
+---
+
+Fix `ix-select` in editable mode to correctly select a known item when confirmed with Enter.

packages/core/src/components/select/select.tsx

@@ -565,12 +565,11 @@ export class Select implements IxInputFieldComponent<string | string[]> {
 
     const trimmedInput = this.inputFilterText.trim();
     const itemLabel = (el as HTMLIxSelectItemElement)?.label;
+    const item = this.itemExists(trimmedInput);
 
-    if (
-      this.editable &&
-      !this.itemExists(trimmedInput) &&
-      !this.itemExists(itemLabel)
-    ) {
+    if (item) {
+      this.itemClick(item.value);
+    } else if (this.editable && !this.itemExists(itemLabel)) {
       const defaultPrevented = this.emitAddItem(trimmedInput);
       if (defaultPrevented) {
         return;

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

@@ -505,3 +505,49 @@ test('async set content and check input value', async ({ mount, page }) => {
   const input = page.locator('input');
   await expect(input).toHaveValue('Item 1');
 });
+
+test.describe('Enter selection with non-existing and existing items', () => {
+  test('editable', async ({ mount, page }) => {
+    await mount(`
+      <ix-select editable>
+        <ix-select-item value="1" label="Item 1">Test</ix-select-item>
+        <ix-select-item value="2" label="Item 2">Test</ix-select-item>
+      </ix-select>
+    `);
+
+    const selectElement = page.locator('ix-select');
+    const input = selectElement.locator('input');
+
+    await input.fill('Item 1');
+    await page.keyboard.press('Enter');
+
+    await expect(input).toHaveValue('Item 1');
+
+    await input.fill('Item 3');
+    await page.keyboard.press('Enter');
+
+    await expect(input).toHaveValue('Item 3');
+  });
+
+  test('non-editable', async ({ mount, page }) => {
+    await mount(`
+      <ix-select>
+        <ix-select-item value="1" label="Item 1">Test</ix-select-item>
+        <ix-select-item value="2" label="Item 2">Test</ix-select-item>
+      </ix-select>
+    `);
+
+    const selectElement = page.locator('ix-select');
+    const input = selectElement.locator('input');
+
+    await input.fill('Item 1');
+    await page.keyboard.press('Enter');
+
+    await expect(input).toHaveValue('Item 1');
+
+    await input.fill('Item 3');
+    await page.keyboard.press('Enter');
+
+    await expect(input).toHaveValue('Item 1');
+  });
+});