fix: select keyboard navigation + refactor unit tests (siemens#1648)

ridvandmrc · Jan 16, 2025 · 1625ddc · 1625ddc
1 parent 9a5fff6
commit 1625ddc
Show file tree

Hide file tree

Showing 7 changed files with 550 additions and 342 deletions.
diff --git a/.changeset/five-carrots-heal.md b/.changeset/five-carrots-heal.md
@@ -0,0 +1,5 @@
+---
+'@siemens/ix': patch
+---
+
+Fix **ix-select** keyboard navigation and wrap behavior when new items are created
diff --git a/packages/core/playwright-ct.config.ts b/packages/core/playwright-ct.config.ts
@@ -28,7 +28,7 @@ const config: PlaywrightTestConfig = {
       },
     },
   ],
-  retries: 2,
+  retries: 3,
 };
 
 export default config;
diff --git a/packages/core/src/components/field-label/tests/field-label.ct.ts b/packages/core/src/components/field-label/tests/field-label.ct.ts
@@ -163,13 +163,13 @@ test('valid color with valid textarea field', async ({ mount, page }) => {
 
 test('invalid color with invalid textarea field', async ({ mount, page }) => {
   await mount(`
-    <ix-textarea label="invalid label text" required>valid field</ix-textarea>
+    <ix-textarea label="invalid label text" required>invalid field</ix-textarea>
   `);
 
   const fieldElement = page.locator('ix-textarea');
   const labelElement = page.locator('ix-field-label');
 
-  await expect(fieldElement).not.toHaveClass(/ix-invalid--required/);
+  await expect(fieldElement).toHaveClass(/ix-invalid--required/);
 
   await expect(labelElement.locator('ix-typography')).toHaveAttribute(
     'style',

diff --git a/packages/core/src/components/select/select.tsx b/packages/core/src/components/select/select.tsx
@@ -304,14 +304,6 @@ export class Select implements IxInputFieldComponent<string | string[]> {
   @Watch('dropdownShow')
   watchDropdownShow(show: boolean) {
     if (show && this.dropdownElement) {
-      this.arrowFocusController = new ArrowFocusController(
-        this.visibleNonShadowItems,
-        this.dropdownElement,
-        this.focusControllerCallbackBind
-      );
-
-      this.arrowFocusController.wrap = !this.editable;
-
       this.itemObserver.observe(this.dropdownElement, {
         childList: true,
         subtree: true,
@@ -494,6 +486,21 @@ export class Select implements IxInputFieldComponent<string | string[]> {
     this.updateFormInternalValue(this.value);
   }
 
+  componentDidRender(): void {
+    if (!this.dropdownShow || this.arrowFocusController) {
+      return;
+    }
+
+    this.arrowFocusController = new ArrowFocusController(
+      this.visibleNonShadowItems,
+      this.dropdownElement,
+      this.focusControllerCallbackBind
+    );
+
+    this.arrowFocusController.wrap =
+      !this.isAddItemVisible() && !this.visibleShadowItems.length;
+  }
+
   @Listen('ix-select-item:valueChange')
   @Listen('ix-select-item:labelChange')
   onLabelChange(event: IxSelectItemLabelChangeEvent) {