chore: close button functionality implemented

Author: ArathyKumar

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

@@ -224,7 +224,7 @@
 }
 
 #toggle,
-#toggle-button,
+/* #toggle-button, */
 #toggle-input {
   display: flex;
   align-items: center;
@@ -251,8 +251,9 @@
   border-color: var(--pf-theme--color--surface--lighter, #f0f0f0) !important;
 }
 
-#toggle-input,
-#toggle-button {
+
+/* #toggle-button, */
+#toggle-input {
   background: transparent;
   border: none;
   text-align: left;
@@ -273,7 +274,7 @@
   pointer-events: none;
 }
 
-#toggle-button {
+#close-button {
   color: currentColor;
   background-color: transparent;
   justify-content: flex-end;
@@ -294,9 +295,9 @@
   border-bottom-width: var(--pf-c-select__toggle--focus--before--BorderBottomWidth);
 }
 
-#outer.typeahead #toggle-button {
+/* #outer.typeahead #toggle-button {
   flex: 0 0 auto;
-}
+} */
 
 #toggle-badge {
   flex: 1 0 auto;

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

@@ -148,9 +148,11 @@ export class PfSearchInput extends LitElement {
     const hideLightDomItems =  !ComboboxController.supportsCrossRootActiveDescendant;
 
     return html`
-      <div id="outer"
-           style="${styleMap(styles)}"
-           class="${classMap({ disabled, expanded, [anchor]: !!anchor, [alignment]: !!alignment })}">
+      <div 
+        id="outer"
+        style="${styleMap(styles)}"
+        class="${classMap({ disabled, expanded, [anchor]: !!anchor, [alignment]: !!alignment })}"
+      >
         <div id="toggle">
           <div class="search-icon">
             <svg fill="currentColor" height="1em" width="1em" viewBox="0 0 512 512">
@@ -167,11 +169,19 @@ export class PfSearchInput extends LitElement {
               </path>
             </svg>
           </div>
-          <input id="toggle-input"
-                 ?disabled="${disabled}"
-                 placeholder="${placeholder || this.#buttonLabel}">
-          
-            <pf-button id="toggle-button" plain label="Close">
+          <input 
+            id="toggle-input"
+            ?disabled="${disabled}"
+            placeholder="${placeholder || this.#buttonLabel}"
+          >
+          <button style="width: 0px; height: 0px; padding: 0px; visibility: hidden;" id="toggle-button"></button>
+          <pf-button 
+            @click="${this.#OnClose}" 
+            ?hidden="${(!expanded && this._toggleInput?.value.trim() === "")}" 
+            id="close-button"  
+            plain 
+            label="Close"
+          >
             <svg fill="currentColor" height="1em" width="1em" viewBox="0 0 352 512">
               <path d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 
               0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 
@@ -181,17 +191,18 @@ export class PfSearchInput extends LitElement {
               12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 
               44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z">
               </path>
-          </svg>
-        </pf-button>
+            </svg>
+          </pf-button>
         </div>
-        <div id="listbox-container"
-             ?hidden="${!expanded}"
-             style="${styleMap({
-               marginTop: `${height || 0}px`,
-               width: width ? `${width}px` : 'auto',
-             })}">
+        <div 
+          id="listbox-container"
+          ?hidden="${!expanded}"
+          style="${styleMap({
+            marginTop: `${height || 0}px`,
+            width: width ? `${width}px` : 'auto',
+          })}"
+        >
           <div id="listbox">
-            
             ${this.#combobox.renderItemsToShadowRoot()}
             <slot ?hidden="${hideLightDomItems}"></slot>
           </div>
@@ -288,6 +299,14 @@ export class PfSearchInput extends LitElement {
       await this.show();
     }
   }
+
+  async #OnClose(){
+    if (this.expanded) {
+      await this.hide();
+    }
+    this.value = "";
+    this._toggleInput!.value = this.value;
+  }
 }
 
 declare global {