From f3600927083327152eaec8a250854dd507017634 Mon Sep 17 00:00:00 2001
From: Angelika Kinas <angelika.kinas@camptocamp.com>
Date: Wed, 8 Nov 2023 10:57:42 +0100
Subject: [PATCH] feat(libs): Add focus on search field ...

and resolve expression has changed after it was checked - error
see here: https://angular.io/errors/NG0100
and make focus configurable and diasbled by default
---
 .../src/app/home/home-header/home-header.component.html    | 1 +
 .../src/lib/fuzzy-search/fuzzy-search.component.html       | 1 +
 .../search/src/lib/fuzzy-search/fuzzy-search.component.ts  | 2 ++
 .../inputs/src/lib/autocomplete/autocomplete.component.ts  | 7 +++++++
 4 files changed, 11 insertions(+)

diff --git a/apps/datahub/src/app/home/home-header/home-header.component.html b/apps/datahub/src/app/home/home-header/home-header.component.html
index ad5c13e1e8..f54e1905b4 100644
--- a/apps/datahub/src/app/home/home-header/home-header.component.html
+++ b/apps/datahub/src/app/home/home-header/home-header.component.html
@@ -17,6 +17,7 @@
       <gn-ui-fuzzy-search
         class="text-[18px] pointer-events-auto"
         (itemSelected)="onFuzzySearchSelection($event)"
+        [autoFocus]="true"
       ></gn-ui-fuzzy-search>
       <div class="flex h-0 py-5 gap-3" [style.opacity]="-0.6 + expandRatio * 2">
         <datahub-header-badge-button
diff --git a/libs/feature/search/src/lib/fuzzy-search/fuzzy-search.component.html b/libs/feature/search/src/lib/fuzzy-search/fuzzy-search.component.html
index 0ce3113a7f..11bf550ee3 100644
--- a/libs/feature/search/src/lib/fuzzy-search/fuzzy-search.component.html
+++ b/libs/feature/search/src/lib/fuzzy-search/fuzzy-search.component.html
@@ -7,4 +7,5 @@
   (inputCleared)="handleInputCleared()"
   [value]="searchInputValue$ | async"
   [clearOnSelection]="true"
+  [autoFocus]="autoFocus"
 ></gn-ui-autocomplete>
diff --git a/libs/feature/search/src/lib/fuzzy-search/fuzzy-search.component.ts b/libs/feature/search/src/lib/fuzzy-search/fuzzy-search.component.ts
index 2e80a32aec..5177aad279 100644
--- a/libs/feature/search/src/lib/fuzzy-search/fuzzy-search.component.ts
+++ b/libs/feature/search/src/lib/fuzzy-search/fuzzy-search.component.ts
@@ -2,6 +2,7 @@ import {
   ChangeDetectionStrategy,
   Component,
   EventEmitter,
+  Input,
   OnInit,
   Output,
   ViewChild,
@@ -25,6 +26,7 @@ import { RecordsRepositoryInterface } from '@geonetwork-ui/common/domain/records
 })
 export class FuzzySearchComponent implements OnInit {
   @ViewChild(AutocompleteComponent) autocomplete: AutocompleteComponent
+  @Input() autoFocus = false
   @Output() itemSelected = new EventEmitter<CatalogRecord>()
   @Output() inputSubmitted = new EventEmitter<string>()
   searchInputValue$: Observable<{ title: string }>
diff --git a/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.ts b/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.ts
index 2442fe4c83..43730f25db 100644
--- a/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.ts
+++ b/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.ts
@@ -1,6 +1,7 @@
 import {
   AfterViewInit,
   ChangeDetectionStrategy,
+  ChangeDetectorRef,
   Component,
   ElementRef,
   EventEmitter,
@@ -47,6 +48,7 @@ export class AutocompleteComponent
   @Input() action: (value: string) => Observable<AutocompleteItem[]>
   @Input() value?: AutocompleteItem
   @Input() clearOnSelection = false
+  @Input() autoFocus = false
   @Output() itemSelected = new EventEmitter<AutocompleteItem>()
   @Output() inputSubmitted = new EventEmitter<string>()
   @Output() inputCleared = new EventEmitter<void>()
@@ -65,6 +67,7 @@ export class AutocompleteComponent
 
   @Input() displayWithFn: (AutocompleteItem) => string = (item) => item
 
+  constructor(private cdRef: ChangeDetectorRef) {}
   ngOnChanges(changes: SimpleChanges): void {
     const { value } = changes
     if (value) {
@@ -110,6 +113,10 @@ export class AutocompleteComponent
 
   ngAfterViewInit(): void {
     this.autocomplete.optionSelected.subscribe(this.selectionSubject)
+    if (this.autoFocus) {
+      this.inputRef.nativeElement.focus()
+      this.cdRef.detectChanges()
+    }
   }
 
   ngOnDestroy(): void {