Merge pull request #544 from geonetwork/fix-search-buttons

fix: autocomplete behavior
geonetwork · Jul 27, 2023 · 044f11f · 044f11f
2 parents 47cf495 + cab7e52
commit 044f11f
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 14 deletions.
diff --git a/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.spec.ts b/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.spec.ts
@@ -5,7 +5,10 @@ import { MatAutocompleteModule } from '@angular/material/autocomplete'
 import { MatIconModule } from '@angular/material/icon'
 import { By } from '@angular/platform-browser'
 import { of, throwError } from 'rxjs'
-import { AutocompleteComponent } from './autocomplete.component'
+import {
+  AutocompleteComponent,
+  AutocompleteItem,
+} from './autocomplete.component'
 import { UiWidgetsModule } from '@geonetwork-ui/ui/widgets'
 
 describe('AutocompleteComponent', () => {
@@ -69,6 +72,14 @@ describe('AutocompleteComponent', () => {
         expect(popup).toBeFalsy()
       })
     })
+    describe('when clicking a predefined button', () => {
+      beforeEach(() => {
+        component.updateInputValue({ title: 'cc' } as AutocompleteItem)
+      })
+      it('calls the action with object given as input', () => {
+        expect(component.action).toHaveBeenCalledWith('cc')
+      })
+    })
     describe('when writing text with 2 chars or less', () => {
       beforeEach(() => {
         component.inputRef.nativeElement.value = 'bl'

diff --git a/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.ts b/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.ts
@@ -18,14 +18,15 @@ import {
   MatAutocompleteSelectedEvent,
   MatAutocompleteTrigger,
 } from '@angular/material/autocomplete'
-import { Observable, of, ReplaySubject, Subscription } from 'rxjs'
+import { merge, Observable, of, ReplaySubject, Subscription } from 'rxjs'
 import {
   catchError,
   debounceTime,
   distinctUntilChanged,
   filter,
   finalize,
   first,
+  map,
   switchMap,
   take,
   tap,
@@ -72,27 +73,30 @@ export class AutocompleteComponent
         this.updateInputValue(value.currentValue)
       }
     }
-    if (this.inputRef) {
-      this.inputRef.nativeElement.value = value?.currentValue?.title
-        ? value.currentValue.title
-        : ''
-    }
   }
 
   ngOnInit(): void {
-    this.suggestions$ = this.control.valueChanges.pipe(
-      tap(() => (this.error = null)),
-      filter((value) => value.length > 2),
-      debounceTime(400),
-      distinctUntilChanged(),
-      tap(() => (this.searching = true)),
-      switchMap((value) => this.action(value)),
+    this.suggestions$ = merge(
+      this.control.valueChanges.pipe(
+        filter((value) => typeof value === 'string'),
+        filter((value: string) => value.length > 2),
+        debounceTime(400),
+        distinctUntilChanged(),
+        tap(() => (this.searching = true))
+      ),
+      this.control.valueChanges.pipe(
+        filter((value) => typeof value === 'object' && value.title),
+        map((item) => item.title)
+      )
+    ).pipe(
+      switchMap((value) => (value ? this.action(value) : of([]))),
       catchError((error: Error) => {
         this.error = error.message
         return of([])
       }),
       finalize(() => (this.searching = false))
     )
+
     this.subscription = this.control.valueChanges.subscribe((any) => {
       if (any !== '') {
         this.cancelEnter = false
@@ -115,6 +119,9 @@ export class AutocompleteComponent
     if (value) {
       this.control.setValue(value)
     }
+    if (this.inputRef) {
+      this.inputRef.nativeElement.value = (value as any)?.title || ''
+    }
   }
 
   clear(): void {