From abddd51796b4519c541ceda2fcb7e56e3a09cfb3 Mon Sep 17 00:00:00 2001
From: Dominik Iwanek <141320833+dominikiwanekhyland@users.noreply.github.com>
Date: Mon, 30 Mar 2026 12:08:42 +0200
Subject: [PATCH] [ACS-10475] [FE][Search] UX improvements for search (#5112)

---
 .../search-input/search-input.component.spec.ts      | 10 +++++++++-
 .../search/search-input/search-input.component.ts    | 12 +++++++++---
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/projects/aca-content/src/lib/components/search/search-input/search-input.component.spec.ts b/projects/aca-content/src/lib/components/search/search-input/search-input.component.spec.ts
index 67bd5a427..d11c7b577 100644
--- a/projects/aca-content/src/lib/components/search/search-input/search-input.component.spec.ts
+++ b/projects/aca-content/src/lib/components/search/search-input/search-input.component.spec.ts
@@ -22,7 +22,7 @@
  * from Hyland Software. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing';
 import { AppTestingModule } from '../../../testing/app-testing.module';
 import { SearchInputComponent } from './search-input.component';
 import { Subject } from 'rxjs';
@@ -124,6 +124,14 @@ describe('SearchInputComponent', () => {
     expect(searchButton).toBeTruthy();
   });
 
+  it('should focus the search input field after view init', fakeAsync(() => {
+    const input = testingUtils.getInputByCSS('.app-search-input');
+    spyOn(input, 'focus');
+    component.ngAfterViewInit();
+    tick();
+    expect(input.focus).toHaveBeenCalled();
+  }));
+
   describe('onSearchSubmit', () => {
     it('should execute search on submit with valid term', () => {
       component.onSearchSubmit('happy faces only');
diff --git a/projects/aca-content/src/lib/components/search/search-input/search-input.component.ts b/projects/aca-content/src/lib/components/search/search-input/search-input.component.ts
index 6ac32107f..48c3a4940 100644
--- a/projects/aca-content/src/lib/components/search/search-input/search-input.component.ts
+++ b/projects/aca-content/src/lib/components/search/search-input/search-input.component.ts
@@ -24,7 +24,7 @@
 
 import { AppHookService } from '@alfresco/aca-shared';
 import { AppConfigService } from '@alfresco/adf-core';
-import { Component, DestroyRef, ElementRef, inject, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
+import { AfterViewInit, Component, DestroyRef, ElementRef, inject, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
 import { ActivatedRoute, NavigationSkipped, NavigationStart, Params, Router } from '@angular/router';
 import { SearchNavigationService } from '../search-navigation.service';
 import { SearchFilterService } from '../search-filter.service';
@@ -51,7 +51,7 @@ import { extractSearchedWordFromEncodedQuery } from '../../../utils/aca-search-u
   encapsulation: ViewEncapsulation.None,
   host: { class: 'aca-search-input' }
 })
-export class SearchInputComponent implements OnInit, OnDestroy {
+export class SearchInputComponent implements OnInit, AfterViewInit, OnDestroy {
   private readonly queryBuilder = inject(SearchQueryBuilderService);
   private readonly config = inject(AppConfigService);
   private readonly router = inject(Router);
@@ -75,7 +75,7 @@ export class SearchInputComponent implements OnInit, OnDestroy {
     this.searchOnChange = this.config.get<boolean>('search.aca:triggeredOnChange', true);
   }
 
-  ngOnInit() {
+  ngOnInit(): void {
     this.initSearchState();
     this.subscribeToRouteParams();
 
@@ -84,6 +84,12 @@ export class SearchInputComponent implements OnInit, OnDestroy {
     });
   }
 
+  ngAfterViewInit(): void {
+    setTimeout(() => {
+      this.searchInputField.nativeElement.focus();
+    });
+  }
+
   ngOnDestroy(): void {
     this.filterService.removeContentFilters();
   }