From ec535b831b83f2dd0f22f736f85c1034c09307f7 Mon Sep 17 00:00:00 2001
From: Florian Necas <florian.necas@camptocamp.com>
Date: Tue, 25 Jul 2023 16:55:27 +0200
Subject: [PATCH] fix: autocomplete behavior

---
 .../autocomplete/autocomplete.component.ts    | 33 +++++++++++--------
 1 file changed, 20 insertions(+), 13 deletions(-)

diff --git a/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.ts b/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.ts
index f29b995f43..d8c9c25441 100644
--- a/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.ts
+++ b/libs/ui/inputs/src/lib/autocomplete/autocomplete.component.ts
@@ -18,7 +18,7 @@ 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,
@@ -26,6 +26,7 @@ import {
   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 {