fix: selected property removed

Author: ArathyKumar

elements/pf-search-input/demo/pf-search-input.html

@@ -1,25 +1,25 @@
 <div class="container">
   <pf-search-input id="search-input" placeholder="Search">
-    <pf-option value="Alabama"> Alabama </pf-option>
-    <pf-option value="New Jersey"> New Jersey </pf-option>
-    <pf-option value="New York"> New York </pf-option>
-    <pf-option value="New Mexico"> New Mexico </pf-option>
-    <pf-option value="North Carolina"> North Carolina </pf-option>
-    <pf-option value="Alabama1"> Alabama 1 </pf-option>
-    <pf-option value="New Jersey1"> New Jersey 1 </pf-option>
-    <pf-option value="New York1"> New York 1 </pf-option>
-    <pf-option value="New Mexico1"> New Mexico 1</pf-option>
-    <pf-option value="North Carolina1"> North Carolina 1</pf-option>
-    <pf-option value="Alabama2"> Alabama 2 </pf-option>
-    <pf-option value="New Jersey2"> New Jersey 2 </pf-option>
-    <pf-option value="New York2"> New York 2 </pf-option>
-    <pf-option value="New Mexico2"> New Mexico 2 </pf-option>
-    <pf-option value="North Carolina2"> North Carolina 2 </pf-option>
-    <pf-option value="Alabama3"> Alabama 3 </pf-option>
-    <pf-option value="New Jersey3"> New Jersey 3 </pf-option>
-    <pf-option value="New York3"> New York 3 </pf-option>
-    <pf-option value="New Mexico3"> New Mexico 3 </pf-option>
-    <pf-option value="North Carolina3"> North Carolina 3 </pf-option>
+    <pf-option>What is Red Hat Enterprise Linux?</pf-option>
+    <pf-option>How does Red Hat OpenShift work?</pf-option>
+    <pf-option>Why use Red Hat Ansible for automation?</pf-option>
+    <pf-option>Where can Red Hat OpenShift be deployed?</pf-option>
+    <pf-option>When should you use Red Hat Enterprise Linux?</pf-option>
+    <pf-option>What is Red Hat Satellite?</pf-option>
+    <pf-option>How does Red Hat integrate with AWS and other clouds?</pf-option>
+    <pf-option>Why choose Red Hat over other Linux vendors?</pf-option>
+    <pf-option>Where can I learn Red Hat technologies?</pf-option>
+    <pf-option>When does support end for RHEL versions?</pf-option>
+    <pf-option>What are Red Hat certifications?</pf-option>
+    <pf-option>How do you secure a RHEL server?</pf-option>
+    <pf-option>Why use OpenShift instead of vanilla Kubernetes?</pf-option>
+    <pf-option>Where is Red Hat headquartered?</pf-option>
+    <pf-option>When should you use Red Hat CoreOS?</pf-option>
+    <pf-option>What is Red Hat Insights?</pf-option>
+    <pf-option>How do you manage Red Hat subscriptions?</pf-option>
+    <pf-option>Why is RHEL considered enterprise-grade?</pf-option>
+    <pf-option>Where can I download RHEL for testing?</pf-option>
+    <pf-option>When was Red Hat founded?</pf-option>
   </pf-search-input>
 </div>
 

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

@@ -158,18 +158,6 @@ export class PfSearchInput extends LitElement {
     }
   }
 
-  /**
-   * Set selected option
-   */
-  @property({ hasChanged: (a, b) => !arraysAreEquivalent(a, b) })
-  set selected(selected: PfOption) {
-    this.#combobox.selected = [selected];
-  }
-
-  get selected(): PfOption[] {
-    return this.#combobox.selected;
-  }
-
   /** List of options */
   get options(): PfOption[] {
     if (isServer) {
@@ -247,14 +235,6 @@ export class PfSearchInput extends LitElement {
     }
   }
 
-  @observes('selected')
-  private async selectedChanged(_: PfOption[], selected: PfOption[]) {
-    this.value = selected.map(x => x.value).join();
-    await this.updateComplete;
-    this._toggleInput!.value = this.value;
-  }
-
-
   @observes('value')
   private valueChanged() {
     this.#internals.setFormValue(this.value ?? '');
@@ -325,6 +305,9 @@ export class PfSearchInput extends LitElement {
 
   #onChange() {
     this.value = this._toggleInput?.value;
+    if (this.value !== this.#combobox.selected[0]?.value) {
+      this.#combobox.selected = [];
+    }
     this.#internals.setFormValue(this.value ?? '');
     this.dispatchEvent(new PfSearchChangeEvent());
   }
@@ -360,7 +343,10 @@ export class PfSearchInput extends LitElement {
 
   #setItemSelected(item: PfOption, selected: boolean) {
     item.selected = selected;
-    this.#setItemActive(item, selected);
+    if (selected) {
+      this.value = item.value;
+      this._toggleInput!.value = this.value;
+    }
   }
 
   #setItemActive(item: PfOption, active: boolean) {