chore: display listbox only when input is entered in the textbox

Author: ArathyKumar

elements/pf-search-input/pf-search-input.css

@@ -190,8 +190,6 @@
 #outer.expanded #listbox-container {
 	opacity: 1;
 	z-index: 9999 !important;
-	max-height: 220px;
-	overflow: hidden;
 }
 
 #listbox {

elements/pf-search-input/pf-search-input.ts

@@ -98,7 +98,7 @@ export class PfSearchInput extends LitElement {
     getToggleButton: () => this._toggleButton ?? null,
     getComboboxInput: () => this._toggleInput ?? null,
     isExpanded: () => this.expanded,
-    requestShowListbox: () => void (this.expanded ||= true),
+    requestShowListbox: () => this.#showListbox(),
     requestHideListbox: () => void (this.expanded &&= false),
     setItemHidden: (item, hidden) => (item.id !== 'placeholder') && void (item.hidden = hidden),
     isItem: item => item instanceof PfOption,
@@ -181,7 +181,7 @@ export class PfSearchInput extends LitElement {
           <input 
             id="toggle-input"
             ?disabled="${disabled}"
-            @change=${this.#onChange}
+            @input=${this.#onChange}
             @keyup=${this.#onSubmit}
             placeholder="${placeholder}"
           >
@@ -244,6 +244,13 @@ export class PfSearchInput extends LitElement {
     this.dispatchEvent(new PfSearchChangeEvent());
   }
 
+  @observes('value')
+  private collapseOnEmpty() {
+    if (this.value === '') {
+      this.expanded = false;
+    }
+  }
+
   async #doExpand() {
     try {
       await this.#float.show({ placement: this.position || 'bottom', flip: !!this.enableFlip });
@@ -316,6 +323,17 @@ export class PfSearchInput extends LitElement {
       this.dispatchEvent(new PfSearchChangeEvent());
     }
   }
+
+  #delay(ms: number): Promise<void> {
+    return new Promise(resolve => setTimeout(resolve, ms));
+  }
+
+  async #showListbox() {
+    await this.#delay(10);
+    if (this.value !== '') {
+      this.expanded ||= true;
+    }
+  }
 }
 
 declare global {