update dropdown behavoir

frontend/src/app/shared/components/dropdown/dropdown.component.html

@@ -25,7 +25,7 @@
         stroke-width="1.5"
         stroke="currentColor"
         class="size-6 cursor-pointer"
-        (click)="toggleDropdown()"
+        (click)="toggleDropdown($event)"
         [class.rotate-180]="showDropdown()">
         <path
           stroke-linecap="round"

frontend/src/app/shared/components/dropdown/dropdown.component.ts

@@ -119,20 +119,27 @@ export class DropdownComponent implements ControlValueAccessor, Validator {
     this.isMouseInDropdown.set(false);
   }
 
-  public toggleDropdown(): void {
+  public toggleDropdown(event: MouseEvent): void {
-    this.showDropdown.set(!this.showDropdown());
+    event.preventDefault();
+    event.stopPropagation();
+    const newDropdownState = !this.showDropdown();
+
+    this.showDropdown.set(newDropdownState);
+
+    if (newDropdownState) {
+      // Wenn das Dropdown geöffnet wird, aktualisieren wir die filteredItems
+      this.updateFilteredItems();
+    } else {
+      // Wenn wir das Dropdown schließen, verhindern wir, dass das Eingabefeld den Fokus erhält
+      (event.target as HTMLElement).blur();
+    }
   }
 
   public onInput(event: Event): void {
     const value = (event.target as HTMLInputElement).value;
 
     this.searchTerm.set(value);
-
+    this.updateFilteredItems();
-    const matchingItems = this.items().filter((item) =>
-      item.toLowerCase().includes(value.toLowerCase())
-    );
-
-    this.filteredItems.set(matchingItems);
 
     const exactMatch = this.items().find(
       (item) => item.toLowerCase() === value.toLowerCase()
@@ -148,8 +155,7 @@ export class DropdownComponent implements ControlValueAccessor, Validator {
       this.itemSelected.emit('');
     }
 
-    this.showDropdown.set(matchingItems.length > 0 || value.trim() !== '');
+    this.showDropdown.set(true);
-
     this.onTouched();
   }
 
@@ -207,21 +213,33 @@ export class DropdownComponent implements ControlValueAccessor, Validator {
   }
 
   public onFocus(): void {
-    this.filteredItems.set(this.items());
+    this.showDropdown.set(true);
+    this.updateFilteredItems();
     this.markAsTouched();
   }
 
   public onBlur(): void {
+    setTimeout(() => {
       if (!this.isMouseInDropdown()) {
         this.closeDropdown();
         this.markAsTouched();
       }
+    }, 1);
   }
 
   private isValidOption(value: string): boolean {
     return this.items().includes(value);
   }
 
+  private updateFilteredItems(): void {
+    const searchTerm = this.searchTerm().toLowerCase();
+    const matchingItems = this.items().filter((item) =>
+      item.toLowerCase().includes(searchTerm)
+    );
+
+    this.filteredItems.set(matchingItems);
+  }
+
   private onChange: (value: string) => void = () => {};
   private onTouched: () => void = () => {};
 }