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

This commit is contained in:
Dominik Iwanek
2026-03-30 12:08:42 +02:00
committed by GitHub
parent 7f3905e0c4
commit abddd51796
2 changed files with 18 additions and 4 deletions
@@ -22,7 +22,7 @@
* from Hyland Software. If not, see <http://www.gnu.org/licenses/>. * 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 { AppTestingModule } from '../../../testing/app-testing.module';
import { SearchInputComponent } from './search-input.component'; import { SearchInputComponent } from './search-input.component';
import { Subject } from 'rxjs'; import { Subject } from 'rxjs';
@@ -124,6 +124,14 @@ describe('SearchInputComponent', () => {
expect(searchButton).toBeTruthy(); 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', () => { describe('onSearchSubmit', () => {
it('should execute search on submit with valid term', () => { it('should execute search on submit with valid term', () => {
component.onSearchSubmit('happy faces only'); component.onSearchSubmit('happy faces only');
@@ -24,7 +24,7 @@
import { AppHookService } from '@alfresco/aca-shared'; import { AppHookService } from '@alfresco/aca-shared';
import { AppConfigService } from '@alfresco/adf-core'; 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 { ActivatedRoute, NavigationSkipped, NavigationStart, Params, Router } from '@angular/router';
import { SearchNavigationService } from '../search-navigation.service'; import { SearchNavigationService } from '../search-navigation.service';
import { SearchFilterService } from '../search-filter.service'; import { SearchFilterService } from '../search-filter.service';
@@ -51,7 +51,7 @@ import { extractSearchedWordFromEncodedQuery } from '../../../utils/aca-search-u
encapsulation: ViewEncapsulation.None, encapsulation: ViewEncapsulation.None,
host: { class: 'aca-search-input' } 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 queryBuilder = inject(SearchQueryBuilderService);
private readonly config = inject(AppConfigService); private readonly config = inject(AppConfigService);
private readonly router = inject(Router); 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); this.searchOnChange = this.config.get<boolean>('search.aca:triggeredOnChange', true);
} }
ngOnInit() { ngOnInit(): void {
this.initSearchState(); this.initSearchState();
this.subscribeToRouteParams(); this.subscribeToRouteParams();
@@ -84,6 +84,12 @@ export class SearchInputComponent implements OnInit, OnDestroy {
}); });
} }
ngAfterViewInit(): void {
setTimeout(() => {
this.searchInputField.nativeElement.focus();
});
}
ngOnDestroy(): void { ngOnDestroy(): void {
this.filterService.removeContentFilters(); this.filterService.removeContentFilters();
} }