fix(core/select): update input value on slot change (#1548)

.changeset/nine-pugs-pump.md

@@ -0,0 +1,5 @@
+---
+'@siemens/ix': patch
+---
+
+fix(core/select): update input value on slot change

packages/core/src/components/select/select.scss

@@ -126,6 +126,13 @@
       }
     }
 
+    ix-icon-button {
+      height: 1.875rem;
+      width: 1.875rem;
+      min-height: 1.875rem;
+      min-width: 1.875rem;
+    }
+
     input {
       @include ellipsis;
       @include text-default;

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

@@ -750,7 +750,11 @@ export class Select {
           >
             {this.i18nSelectListHeader}
           </div>
-          <slot></slot>
+          <slot
+            onSlotchange={() => {
+              this.updateSelection();
+            }}
+          ></slot>
           <div
             ref={(ref) => (this.customItemsContainerRef = ref)}
             class="d-contents"

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

@@ -734,8 +734,8 @@ test.describe('Events', () => {
     const select = await page.locator('ix-select');
     const valueChanged = select.evaluate((elm) => {
       return new Promise<number>((resolve) => {
-        elm.addEventListener('valueChange', (e: CustomEvent) =>
-          resolve(e.detail)
+        elm.addEventListener('valueChange', (e: Event) =>
+          resolve((e as CustomEvent).detail)
         );
       });
     });
@@ -753,7 +753,9 @@ test.describe('Events', () => {
     const select = await page.locator('ix-select');
     const itemAdded = select.evaluate((elm) => {
       return new Promise<number>((resolve) => {
-        elm.addEventListener('addItem', (e: CustomEvent) => resolve(e.detail));
+        elm.addEventListener('addItem', (e: Event) =>
+          resolve((e as CustomEvent).detail)
+        );
       });
     });
     const input = await page.locator('input');
@@ -795,3 +797,21 @@ test.describe('Events', () => {
     });
   });
 });
+
+test('async set content and check input value', async ({ mount, page }) => {
+  await mount(`<ix-select value="1"></ix-select>`);
+
+  await page.evaluate(async () => {
+    const select = document.querySelector('ix-select');
+    if (select) {
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+      select.innerHTML = `
+        <ix-select-item value="1" label="Item 1">Test</ix-select-item>
+        <ix-select-item value="2" label="Item 2">Test</ix-select-item>
+      `;
+    }
+  });
+
+  const input = page.locator('input');
+  await expect(input).toHaveValue('Item 1');
+});