fix(table): Fixes an issue where the inital search value was not appl…

…ied to the filter.

libs/barista-components/table/src/search/table-search.ts

@@ -78,6 +78,7 @@ export class DtTableSearch implements ControlValueAccessor {
     const change = this._value !== actualValue;
 
     this._value = actualValue;
+    this._filterValueChanged.emit({ source: this, value });
 
     if (change && this._handleChange !== undefined) {
       this._handleChange(actualValue);
@@ -100,6 +101,10 @@ export class DtTableSearch implements ControlValueAccessor {
   @Output()
   readonly valueChange = new EventEmitter<DtTableSearchChangeEvent>();
 
+  /** @internal Event emitted when the search term is changed. */
+  @Output()
+  readonly _filterValueChanged = new EventEmitter<DtTableSearchChangeEvent>();
+
   private _handleTouched?: () => void;
   private _handleChange?: (value: string) => void;
 
@@ -113,7 +118,6 @@ export class DtTableSearch implements ControlValueAccessor {
   /** @internal Emits a change event */
   _handleInputChange(event: Event): void {
     const value = (event.target as HTMLInputElement).value;
-
     this.value = value;
     this.valueChange.emit({ source: this, value });
   }

libs/barista-components/table/src/table-data-source.ts

@@ -26,7 +26,7 @@ import {
   Subject,
   Subscription,
 } from 'rxjs';
-import { map, takeUntil } from 'rxjs/operators';
+import { distinctUntilChanged, map, takeUntil } from 'rxjs/operators';
 import { DtTableSearch } from './search';
 import {
   DtSimpleColumnComparatorFunction,
@@ -152,11 +152,14 @@ export class DtTableDataSource<T> extends DataSource<T> {
     this._searchChangeSubscription.unsubscribe();
 
     if (this._search !== null) {
-      this._searchChangeSubscription = this._search.valueChange.subscribe(
-        (event) => {
-          this._filter.next(event.value);
-        },
-      );
+      this._searchChangeSubscription = this._search._filterValueChanged
+        .pipe(
+          map((event) => event.value),
+          distinctUntilChanged(),
+        )
+        .subscribe((value) => {
+          this._filter.next(value);
+        });
     } else {
       this._searchChangeSubscription = Subscription.EMPTY;
     }

libs/examples/src/table/table-search-example/table-search-example.ts

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import { Component, OnInit, ViewChild } from '@angular/core';
+import { Component, AfterViewInit, ViewChild } from '@angular/core';
 
 import {
   formatBytes,
@@ -30,7 +30,7 @@ import {
   styleUrls: ['./table-search-example.scss'],
   templateUrl: './table-search-example.html',
 })
-export class DtExampleTableSearch implements OnInit {
+export class DtExampleTableSearch implements AfterViewInit {
   data: object[] = [
     {
       host: 'et-demo-2-win4',
@@ -86,14 +86,14 @@ export class DtExampleTableSearch implements OnInit {
   @ViewChild(DtTableSearch, { static: true })
   tableSearch: DtTableSearch;
 
-  searchValue = '';
+  searchValue = 'docker';
   dataSource: DtTableDataSource<object>;
 
   constructor() {
     this.dataSource = new DtTableDataSource(this.data);
   }
 
-  ngOnInit(): void {
+  ngAfterViewInit(): void {
     this.dataSource.search = this.tableSearch;
   }