fix: autocomplete behavior

libs/ui/inputs/src/lib/autocomplete/autocomplete.component.spec.ts

@@ -5,7 +5,10 @@
 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 @@
         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'
@@ -168,10 +179,10 @@
   })
 
   describe('@Input() value', () => {
     let anyEmitted
     describe('when set', () => {
       beforeEach(() => {
         const simpleChanges: any = {
           value: {
             previousValue: undefined,
             currentValue: { title: 'hello' },
@@ -187,7 +198,7 @@
     })
     describe('when changed', () => {
       beforeEach(() => {
         const simpleChanges: any = {
           value: {
             previousValue: { title: 'hello' },
             currentValue: { title: 'good bye' },
@@ -204,7 +215,7 @@
     describe('when ref changed but same text', () => {
       let anyEmitted
       beforeEach(() => {
         const simpleChanges: any = {
           value: {
             previousValue: { title: 'good bye' },
             currentValue: { title: 'good bye' },
@@ -224,7 +235,7 @@
     describe('when not set on init (firstChange == true)', () => {
       beforeEach(() => {
         component.inputSubmitted.subscribe((event) => (anyEmitted = event))
         const simpleChanges: any = {
           value: {
             firstChange: true,
             previousValue: undefined,
@@ -241,7 +252,7 @@
 
   describe('#handleSelection', () => {
     let selectionEmitted
     const selectionEvent: any = {
       option: {
         value: 'first',
       },

libs/ui/inputs/src/lib/autocomplete/autocomplete.component.ts

@@ -18,14 +18,15 @@
   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 @@
         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 @@
     if (value) {
       this.control.setValue(value)
     }
+    if (this.inputRef) {
+      this.inputRef.nativeElement.value = (value as any)?.title || ''
+    }
   }
 
   clear(): void {