Merge pull request #677 from geonetwork/DH-focus-search-field-on-app-…

…load feat(libs): Focus search field on app load
geonetwork · Nov 13, 2023 · 1c1919e · 1c1919e
2 parents 54ff36a + f360092
commit 1c1919e
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 0 deletions.
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
@@ -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
@@ -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
@@ -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
@@ -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 {