refactor(filtered-search): focus criterion input via afterNextRender

.github/workflows/build-and-test.yaml

@@ -184,6 +184,8 @@ jobs:
       - uses: actions/setup-node@48b55a011bda9f5d6aeb4c2d9c7362e8dae4041e # v6
         with:
           node-version: lts/krypton
+          cache: 'npm'
+      - run: npm ci --prefer-offline --no-audit --include=optional
       - uses: actions/download-artifact@3e5f45b2cfb9172054b4087a40e8e0b5a5461e7c # v8
         with:
           path: all-blob-reports

playwright.config.ts

@@ -127,8 +127,8 @@ const config: PlaywrightTestConfig = {
     /* Base URL to use in actions like `await page.goto('/')`. */
     baseURL: `http://${localAddress}:${port}`,
 
-    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
-    trace: isCI ? 'on-first-retry' : 'retain-on-failure',
+    /* Retain a full trace from the failing attempt. See https://playwright.dev/docs/trace-viewer */
+    trace: 'retain-on-failure',
 
     viewport: baseViewport,
 

playwright/e2e/element-examples/si-filtered-search.spec.ts

@@ -71,6 +71,10 @@ test.describe('filtered search', () => {
     await expect(page.getByRole('option', { name: 'Karlsruhe' })).toHaveClass(/active/);
     await page.keyboard.type('annover');
     await expect(page.getByRole('option').first()).not.toBeVisible(); // Ensures that the view was updated by Angular after typing.
+    // Guard against dropped keystrokes under CPU load: confirm full value before committing.
+    await expect(
+      page.locator('.pill-group', { hasText: 'Location' }).getByRole('combobox')
+    ).toHaveValue('Hannover');
     await page.keyboard.press('Enter');
     await expect(freeTextSearch).toBeFocused();
     await freeTextSearch.fill('Building:House');

projects/element-ng/filtered-search/si-filtered-search-value.component.ts

@@ -4,10 +4,13 @@
  */
 import { CdkMonitorFocus, FocusOrigin } from '@angular/cdk/a11y';
 import {
+  afterNextRender,
   ChangeDetectionStrategy,
   Component,
   computed,
   ElementRef,
+  inject,
+  Injector,
   input,
   model,
   OnInit,
@@ -48,6 +51,8 @@ import { SiFilteredSearchTypeaheadComponent } from './values/typeahead/si-filter
   changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class SiFilteredSearchValueComponent implements OnInit {
+  private readonly injector = inject(Injector);
+
   readonly value = model.required<CriterionValue>();
   readonly definition = input.required<InternalCriterionDefinition>();
   readonly disabled = input.required<boolean>();
@@ -123,16 +128,19 @@ export class SiFilteredSearchValueComponent implements OnInit {
     this.active.set(true);
     this.hasPendingFocus = true;
 
-    setTimeout(() => {
-      if (field === 'value') {
-        this.valueInput()?.focus();
-      } else if (field === 'operator') {
-        this.operatorInput()?.nativeElement.focus();
-      } else {
-        (this.operatorInput()?.nativeElement ?? this.valueInput())?.focus();
-      }
-      this.hasPendingFocus = false;
-    });
+    afterNextRender(
+      () => {
+        if (field === 'value') {
+          this.valueInput()?.focus();
+        } else if (field === 'operator') {
+          this.operatorInput()?.nativeElement.focus();
+        } else {
+          (this.operatorInput()?.nativeElement ?? this.valueInput())?.focus();
+        }
+        this.hasPendingFocus = false;
+      },
+      { injector: this.injector }
+    );
   }
 
   protected backspaceOverflow(): void {