fix(core/select): fix editable mode with shadow DOM (#758)

Co-authored-by: Tiago Viegas <tiago.viegas@siemens.com>
siemens · Sep 19, 2023 · 55a514a · 55a514a
1 parent 950c66a
commit 55a514a
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/packages/core/src/components/select/select.tsx b/packages/core/src/components/select/select.tsx
@@ -139,15 +139,20 @@ export class Select {
   private labelMutationObserver: MutationObserver;
 
   get items() {
-    return Array.from(this.hostElement.querySelectorAll('ix-select-item'));
+    return [
+      ...Array.from(this.hostElement.querySelectorAll('ix-select-item')),
+      ...Array.from(
+        this.hostElement.shadowRoot.querySelectorAll('ix-select-item')
+      ),
+    ];
   }
 
   get selectedItems() {
     return this.items.filter((item) => item.selected);
   }
 
   get addItemButton() {
-    return this.hostElement.querySelector('.add-item');
+    return this.hostElement.shadowRoot.querySelector('.add-item');
   }
 
   get isSingleMode() {

diff --git a/packages/core/src/components/select/test/select.ct.ts b/packages/core/src/components/select/test/select.ct.ts
@@ -51,6 +51,9 @@ test('editable mode', async ({ mount, page }) => {
   await expect(add).toBeVisible();
 
   await add.click();
+
+  await expect(page.getByTestId('input')).toHaveValue(/Not existing/);
+
   await page.locator('.chevron-down-container').click();
 
   await expect(page.getByRole('button', { name: 'Item 1' })).toBeVisible();