[ACS-10475] [FE][Search] UX improvements for search (#5112)

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');

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();
   }