fix(search): Properly rehydrate serialized value (#342)

* fix(search): Properly rehydrate serialized value * fix(search): Don't clear value on query
knoxville-utilities-board · Jan 24, 2025 · 69e19ae · 69e19ae
1 parent a585f8b
commit 69e19ae
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 9 deletions.
diff --git a/apps/docs-app/app/components/f/components/form/search.gts b/apps/docs-app/app/components/f/components/form/search.gts
@@ -17,7 +17,7 @@ function log(...msg: string[]) {
 
 class Model {
   @tracked
-  property = '';
+  property = 'Orange';
 }
 
 export default class extends Component {

diff --git a/packages/ember-core/src/components/form/search.gts b/packages/ember-core/src/components/form/search.gts
@@ -62,7 +62,7 @@ export default class Search<T> extends BoundValue<
   SearchSignature<T>,
   string | T
 > {
-  self: Record<'searchString', string> = this;
+  self: Record<'searchString' | 'displayValue', string> = this;
   declare visibility: PopoverVisibility;
   declare inputElement: HTMLInputElement;
   declare menuElement: HTMLElement;
@@ -151,13 +151,20 @@ export default class Search<T> extends BoundValue<
     return classes.join(' ');
   }
 
-  get displayValue() {
-    if (!this.value) {
-      return this.searchString;
+  get displayValue(): string {
+    const { value } = this;
+    const isStringValue = typeof value === 'string';
+    const isStringOption = this.selectedOption?.value === value;
+
+    if (
+      isStringValue ||
+      (isStringOption && (!this.internalOptions.length || this.query.isRunning))
+    ) {
+      return value as string;
     }
 
     if (this.args.serializationPath === null) {
-      return get(this.value, this.args.displayPath ?? 'label') as string;
+      return get(value, this.args.displayPath ?? 'label') as string;
     }
 
     if (this.selectedOption) {
@@ -299,8 +306,6 @@ export default class Search<T> extends BoundValue<
   @action
   onSearch(evt: Event) {
     this.searchString = (evt.target as HTMLInputElement).value;
-    this.value = '';
-    this.activeIndex = -1;
 
     if (!this.canPerformSearch) {
       return;
@@ -365,7 +370,10 @@ export default class Search<T> extends BoundValue<
               class={{this.inputClassList}}
               placeholder={{this.placeholder}}
               @basic={{@basic}}
-              @binding={{bind this.self "searchString"}}
+              @binding={{bind
+                this.self
+                (if visibility.isShown "searchString" "displayValue")
+              }}
               @disabled={{@disabled}}
               @id={{@id}}
               @readonly={{@readonly}}