Make Dropdown to Clear Its Input History Everytime

src/app/components/dropdown/dropdown.html

@@ -3,12 +3,12 @@
     <span class="material-symbols-outlined icon-24 prefix-icon">{{ icon() }}</span>
   }
 
+  @if (isOpen()) {
     <div #searchInput class="dropdown-input" [class.hidden]="!isOpen()" [class.focus-mode]="inputFocusMode()"
        contenteditable="true" role="textbox" aria-multiline="false" [aria-placeholder]="translation.common.selectOption"
        [attr.placeholder]="translation.common.selectOption" tabindex="-1" spellcheck="false"
-       (input)="onSearch($event)" (click)="handleInputClick($event)" (mousedown)="handleInputMouseDown()" (beforeinput)="preprocessInputContent($event)"></div>
-
-  @if (!isOpen()) {
+       (input)="onSearch($event)" (click)="handleInputClick($event)" (mousedown)="handleInputMouseDown()" (beforeinput)="preprocessInputContent($event)">{{ this.initialInputText() }}</div>
+  } @else {
     <span class="placeholder">{{ selectedLabel() }}</span>
   }
   <span class="material-symbols-outlined icon-24 chevron" [class.open]="isOpen()">keyboard_arrow_down</span>

src/app/components/dropdown/dropdown.ts

@@ -38,7 +38,7 @@ export interface DropdownOption {
     '[class.open]': 'isOpen()',
     tabindex: '0',
     '(click)': 'toggle()',
-    '(focus)': 'onFocus($event)',
+    '(focus)': 'onFocus()',
     '(mousedown)': 'onMouseDown($event)',
     '(keydown)': 'onKeyDown($event)',
     '(keydown.enter)': 'onEnter($event)',
@@ -79,9 +79,6 @@ export class Dropdown implements OnInit {
       if (!isDropdownOpen) {
         if (untracked(this.inputFocusMode)) this.inputFocusMode.set(false);
         this.searchQuery.set('');
-
-        let currentValue = untracked(this.normalizedOptions).find((o) => o.value === this.value());
-        if (currentValue) this.searchInput()!.nativeElement.innerText = currentValue.label;
       }
     });
   }
@@ -115,6 +112,11 @@ export class Dropdown implements OnInit {
     return opts.filter((o) => o.label.toLowerCase().normalize('NFKD').includes(query));
   });
 
+  initialInputText = computed<string>(() => {
+    let currentValue = this.normalizedOptions().find((o) => o.value === this.value())?.label;
+    return currentValue ? currentValue : "";
+  })
+
   toggle() {
     if (this.isLatestMouseDownInsideInput) {
       this.isLatestMouseDownInsideInput = false;
@@ -124,18 +126,20 @@ export class Dropdown implements OnInit {
     this.isOpen.update((v) => !v);
     if (this.isOpen()) {
       this.searchQuery.set('');
-      this.focusedIndex.set(this.normalizedOptions().findIndex((o) => o.value === this.value()));
 
-      requestAnimationFrame(() => {
+      const currentIndex = this.normalizedOptions().findIndex((o) => o.value === this.value());
+      this.focusedIndex.set(currentIndex);
+
+      setTimeout(() => {
         const searchInputElement = this.searchInput()!.nativeElement;
 
         searchInputElement.focus();
         this.setCursorToEnd(searchInputElement);
-      });
+      }, 0);
     }
   }
 
-  onFocus(event: Event) {
+  onFocus() {
     if (this.isOpen()) {
       const searchInputElement = this.searchInput()!.nativeElement;