#458 Searchbox Focus

apps/page/catalog/src/lib/article-search/article-search.component.ts

@@ -6,12 +6,13 @@ import { Filter, FilterOption } from '@ui/filter';
 import { BehaviorSubject, Observable, of, Subscription } from 'rxjs';
 import { delay, map, switchMap } from 'rxjs/operators';
 import { ArticleSearchStore } from './article-search-new.store';
+import { FocusSearchboxEvent } from './focus-searchbox.event';
 
 @Component({
   selector: 'page-article-search',
   templateUrl: 'article-search.component.html',
   styleUrls: ['article-search.component.scss'],
-  providers: [ArticleSearchStore],
+  providers: [ArticleSearchStore, FocusSearchboxEvent],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ArticleSearchComponent implements OnInit, OnDestroy {
@@ -19,7 +20,7 @@ export class ArticleSearchComponent implements OnInit, OnDestroy {
   showMainContent$ = this.getShowMainContent();
   lastSelectedFilterCategory: Filter;
 
-  routerEventsSubscription: Subscription;
+  subscriptions = new Subscription();
 
   hasFilter$: Observable<boolean> = this.store.queryParamsFilter$.pipe(map((filter) => filter !== ''));
 
@@ -27,18 +28,29 @@ export class ArticleSearchComponent implements OnInit, OnDestroy {
     private store: ArticleSearchStore,
     private breadcrumb: BreadcrumbService,
     private application: ApplicationService,
-    private route: ActivatedRoute
+    private route: ActivatedRoute,
+    private focusSearchbox: FocusSearchboxEvent
   ) {}
 
   ngOnInit() {
-    this.routerEventsSubscription = this.application.activatedProcessId$.subscribe((processId) => {
-      this.setBreadcrumb(processId);
-    });
+    this.subscriptions.add(
+      this.application.activatedProcessId$.subscribe((processId) => {
+        this.setBreadcrumb(processId);
+      })
+    );
+
+    this.subscriptions.add(
+      this.filterActive$.pipe(delay(500)).subscribe((active) => {
+        if (!active) {
+          this.focusSearchbox.emit();
+        }
+      })
+    );
   }
 
   ngOnDestroy() {
-    if (!!this.routerEventsSubscription) {
-      this.routerEventsSubscription.unsubscribe();
+    if (!!this.subscriptions) {
+      this.subscriptions.unsubscribe();
     }
   }
 

apps/page/catalog/src/lib/article-search/containers/article-searchbox/article-searchbox.component.html

@@ -11,7 +11,7 @@
         uiSearchboxInput
         placeholder="Titel, Autor, Verlag, Schlagwort, ..."
         (keydown.enter)="startSearch(); autocomplete.close()"
-        autofocus
+        uiAutofocus
       />
       <ui-searchbox-warning *ngIf="isEmpty$ | async">
         <button class="no-results-button" (click)="resetSearchState()">

apps/page/catalog/src/lib/article-search/containers/article-searchbox/article-searchbox.component.ts

@@ -18,6 +18,8 @@ import { NativeContainerService } from 'native-container';
 import { Subscription } from 'rxjs';
 import { ArticleSearchStore } from '../../article-search-new.store';
 import { DomainCatalogService } from '@domain/catalog';
+import { FocusSearchboxEvent } from '../../focus-searchbox.event';
+import { UiAutofocusDirective } from 'apps/ui/common/src/lib/autofocus.directive';
 
 @Component({
   selector: 'page-article-searchbox',
@@ -26,6 +28,8 @@ import { DomainCatalogService } from '@domain/catalog';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ArticleSearchboxComponent implements OnInit, OnDestroy {
+  @ViewChild(UiAutofocusDirective, { read: UiAutofocusDirective, static: false }) autofocus: UiAutofocusDirective;
+
   @ViewChild(UiSearchboxAutocompleteComponent, {
     read: UiSearchboxAutocompleteComponent,
     static: false,
@@ -103,11 +107,18 @@ export class ArticleSearchboxComponent implements OnInit, OnDestroy {
     private cdr: ChangeDetectorRef,
     private store: ArticleSearchStore,
     private nativeContainer: NativeContainerService,
-    private catalog: DomainCatalogService
+    private catalog: DomainCatalogService,
+    private focusSearchbox: FocusSearchboxEvent
   ) {}
 
   ngOnInit() {
     this.detectDevice();
+
+    this.subscriptions.add(
+      this.focusSearchbox.subscribe((_) => {
+        this.autofocus?.focus();
+      })
+    );
   }
 
   ngOnDestroy() {

apps/page/catalog/src/lib/article-search/containers/article-searchbox/article-searchbox.module.ts

@@ -1,6 +1,7 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
+import { UiCommonModule } from '@ui/common';
 import { UiIconModule } from '@ui/icon';
 import { UiInputModule } from '@ui/input';
 import { UiSearchboxModule } from '@ui/searchbox';
@@ -9,7 +10,7 @@ import { ArticleSearchboxComponent } from './article-searchbox.component';
 import { InfoboxComponent } from './infobox/infobox.component';
 
 @NgModule({
-  imports: [CommonModule, FormsModule, UiIconModule, UiSearchboxModule, UiInputModule],
+  imports: [CommonModule, FormsModule, UiIconModule, UiSearchboxModule, UiInputModule, UiCommonModule],
   exports: [ArticleSearchboxComponent, InfoboxComponent],
   declarations: [ArticleSearchboxComponent, InfoboxComponent],
   providers: [],

apps/page/catalog/src/lib/article-search/focus-searchbox.event.ts

@@ -0,0 +1,4 @@
+import { EventEmitter, Injectable } from '@angular/core';
+
+@Injectable()
+export class FocusSearchboxEvent extends EventEmitter<void> {}

apps/page/catalog/src/lib/article-search/search-filter/search-filter.component.ts

@@ -4,6 +4,7 @@ import { cloneDeep } from 'lodash';
 import { BehaviorSubject, Subscription } from 'rxjs';
 import { first, map } from 'rxjs/operators';
 import { ArticleSearchStore } from '../article-search-new.store';
+import { FocusSearchboxEvent } from '../focus-searchbox.event';
 
 @Component({
   selector: 'page-article-search-filter',
@@ -42,7 +43,7 @@ export class ArticleSearchFilterComponent implements OnInit, OnDestroy {
 
   searchStateSubscription: Subscription;
 
-  constructor(private cdr: ChangeDetectorRef, private store: ArticleSearchStore) {}
+  constructor(private cdr: ChangeDetectorRef, private store: ArticleSearchStore, private focusSearchbox: FocusSearchboxEvent) {}
 
   ngOnInit() {
     this.copyFilterLatestStatus();
@@ -76,10 +77,12 @@ export class ArticleSearchFilterComponent implements OnInit, OnDestroy {
 
   checkInputFilter(filter: Filter[]) {
     this.store.setInputSelectorFilter({ filter });
+    this.focusSearchbox.emit();
   }
 
   checkMainFilter(filter: Filter[]) {
     this.store.setMainFilter({ filter });
+    this.focusSearchbox.emit();
   }
 
   updateCategory(filter: Filter) {

apps/page/catalog/src/lib/article-search/search-main/search-main.component.ts

@@ -8,6 +8,7 @@ import { combineLatest, NEVER, Subscription } from 'rxjs';
 import { catchError, debounceTime, first, switchMap } from 'rxjs/operators';
 import { ArticleSearchStore } from '../article-search-new.store';
 import { isEqual } from 'lodash';
+import { FocusSearchboxEvent } from '../focus-searchbox.event';
 
 @Component({
   selector: 'page-article-search-main',
@@ -27,7 +28,8 @@ export class ArticleSearchMainComponent implements OnInit, OnDestroy {
     private catalog: DomainCatalogService,
     private route: ActivatedRoute,
     private breadcrumb: BreadcrumbService,
-    private application: ApplicationService
+    private application: ApplicationService,
+    private focusSearchbox: FocusSearchboxEvent
   ) {}
 
   ngOnInit() {
@@ -62,10 +64,12 @@ export class ArticleSearchMainComponent implements OnInit, OnDestroy {
 
   checkInputFilter(filter: Filter[]) {
     this.store.setInputSelectorFilter({ filter });
+    this.focusSearchbox.emit();
   }
 
   checkMainFilter(filter: Filter[]) {
     this.store.setMainFilter({ filter });
+    this.focusSearchbox.emit();
   }
 
   setQueryHistory(recentQuery: string) {

apps/ui/common/src/lib/autofocus.directive.ts

@@ -1,6 +1,6 @@
 import { Directive, ElementRef, OnInit, Self } from '@angular/core';
 
-@Directive({ selector: '[autofocus]' })
+@Directive({ selector: '[uiAutofocus]', exportAs: 'uiAutofocus' })
 export class UiAutofocusDirective implements OnInit {
   get nativeElement() {
     return this.elementRef.nativeElement as HTMLElement;