#1799 #1814 Filter Focus im Suchfeld

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

@@ -23,8 +23,7 @@
         uiSearchboxInput
         placeholder="Titel, Autor, Verlag, Schlagwort, ..."
         (keydown.enter)="startSearch(); autocomplete.close()"
-        uiIsInViewport
-        (viewportEntered)="focus($event)"
+        autofocus
       />
       <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

@@ -35,8 +35,6 @@ export class ArticleSearchboxComponent implements OnInit, OnDestroy, AfterViewIn
   autocomplete: UiSearchboxAutocompleteComponent;
   autocompleteResult$: Observable<AutocompleteDTO[]>;
 
-  @ViewChild('input', { static: true }) searchbar: ElementRef<HTMLInputElement>;
-
   readonly filterChips$ = this.articleSearchStore.selectPrimaryFilter$;
   readonly query$ = this.articleSearchStore.selectQuery$.pipe(
     map((query) => query.query),
@@ -195,9 +193,5 @@ export class ArticleSearchboxComponent implements OnInit, OnDestroy, AfterViewIn
     }, 1000);
   }
 
-  ngAfterViewInit() {
-    setTimeout(() => {
-      this.searchbar.nativeElement.focus();
-    }, 1000);
-  }
+  ngAfterViewInit() {}
 }

apps/page/customer/src/lib/customer-search/shared/customer-searchbox/customer-searchbox.component.html

@@ -9,8 +9,7 @@
       placeholder="Name, E-Mail, Kundenkartennummer, ..."
       (inputChange)="search.inputChange$.next($event)"
       (keydown.enter)="startSearch(); autocomplete.close()"
-      uiIsInViewport
-      (viewportEntered)="focus($event)"
+      autofocus
     />
     <ui-searchbox-warning *ngIf="searchState === 'empty'">
       Keine Suchergebnisse

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

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

apps/ui/common/src/lib/common.module.ts

@@ -1,4 +1,5 @@
 import { NgModule } from '@angular/core';
+import { UiAutofocusDirective } from './autofocus.directive';
 import { BlobImageDirective } from './blob-image.directive';
 import { UiClickOutsideDirective } from './click-outside.directive';
 import { IsInViewportDirective } from './is-in-viewport.directive';
@@ -8,7 +9,7 @@ import { ScrollContainerDirective } from './scroll-container.directive';
 import { SkeletonLoaderComponent } from './skeleton-loader';
 
 const components = [SkeletonLoaderComponent];
-const directives = [UiClickOutsideDirective, IsInViewportDirective, ScrollContainerDirective, BlobImageDirective];
+const directives = [UiClickOutsideDirective, IsInViewportDirective, ScrollContainerDirective, BlobImageDirective, UiAutofocusDirective];
 const pipes = [StripHtmlTagsPipe, SubstrPipe];
 @NgModule({
   imports: [],