Merge pull request #10 from frankframework/issue/7-search-input-doesnt-update-when-ngmodel-variable-is-updated

Fix search input not being updated on external value changes

Author: philipsens

projects/angular-components/src/lib/search/search.component.html

@@ -3,10 +3,11 @@
   ><input
     type="text"
     [placeholder]="placeholder"
-    [attr.value]="value"
     [disabled]="disabled"
+    [value]="value"
     (blur)="_onBlur()"
-    (input)="_onInteractionEvent($event)"
+    (input)="_onInputEvent()"
+    (change)="_onInteractionEvent($event)"
     #input
   />
   @if (focusKeyEnabled && !disabled) {

projects/angular-components/src/lib/search/search.component.ts

@@ -1,9 +1,11 @@
 import {
   booleanAttribute,
   ChangeDetectionStrategy,
+  ChangeDetectorRef,
   Component,
   ElementRef,
   forwardRef,
+  inject,
   Input,
   OnDestroy,
   OnInit,
@@ -30,21 +32,42 @@ export const SEARCH_CONTROL_VALUE_ACCESSOR = {
   providers: [SEARCH_CONTROL_VALUE_ACCESSOR],
 })
 export class SearchComponent implements OnInit, OnDestroy, ControlValueAccessor {
-  @Input() value: string = '';
   @Input() placeholder: string = 'Search...';
   @Input() focusKey: string = '/';
   @Input({ transform: booleanAttribute }) focusKeyEnabled: boolean = true;
-  @Input({ transform: booleanAttribute }) disabled: boolean = false;
   @Input({ transform: booleanAttribute }) slim: boolean = false;
   @ViewChild('input') _inputElement!: ElementRef<HTMLInputElement>;
 
   protected _onChange: (value: string) => void = noop;
   protected _onTouched: () => void = noop;
 
+  private _value: string = '';
+  private _disabled: boolean = false;
+
+  @Input()
+  get value(): string {
+    return this._value;
+  }
+  set value(value: string) {
+    this._value = value;
+    this._changeDetectorRef.markForCheck();
+  }
+
+  @Input({ transform: booleanAttribute })
+  get disabled(): boolean {
+    return this._disabled;
+  }
+  set disabled(disabled: boolean) {
+    this._disabled = disabled;
+    this._changeDetectorRef.markForCheck();
+  }
+
+  private _changeDetectorRef = inject(ChangeDetectorRef);
   private searchSubject: Subject<string> = new Subject();
 
   ngOnInit(): void {
     this.searchSubject.pipe(debounceTime(200)).subscribe((value) => {
+      this.value = value;
       this._onChange(value);
     });
 
@@ -78,12 +101,18 @@ export class SearchComponent implements OnInit, OnDestroy, ControlValueAccessor
   }
 
   protected _onBlur(): void {
-    Promise.resolve().then(() => this._onTouched());
+    Promise.resolve().then(() => {
+      this._onTouched();
+      this._changeDetectorRef.markForCheck();
+    });
+  }
+
+  protected _onInputEvent(): void {
+    this.searchSubject.next(this._inputElement.nativeElement.value);
   }
 
   protected _onInteractionEvent(event: Event): void {
     event.stopPropagation();
-    this.searchSubject.next(this._inputElement.nativeElement.value);
   }
 
   protected _onKeyEvent(event: KeyboardEvent): void {

src/app/app.component.html

@@ -32,6 +32,7 @@ <h2>Search</h2>
       </div>
     </div>
     <p>Search query: {{ searchText }}</p>
+    <ff-button (click)="changeSearchQuery()">Update search query</ff-button>
   </li>
   <li>
     <h2>Alert</h2>

src/app/app.component.ts

@@ -57,4 +57,8 @@ export class AppComponent implements OnInit {
   protected toggleTheme(): void {
     document.body.classList.toggle('ff-dark-theme');
   }
+
+  protected changeSearchQuery(): void {
+    this.searchText = 'Eekum Bokum';
+  }
 }