diff --git a/libs/barista-components/table/src/search/table-search.ts b/libs/barista-components/table/src/search/table-search.ts index 97e70b58f1..f7b0e37b1f 100644 --- a/libs/barista-components/table/src/search/table-search.ts +++ b/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(); + /** @internal Event emitted when the search term is changed. */ + @Output() + readonly _filterValueChanged = new EventEmitter(); + 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 }); } diff --git a/libs/barista-components/table/src/table-data-source.ts b/libs/barista-components/table/src/table-data-source.ts index a9b946d387..3d4bf15209 100644 --- a/libs/barista-components/table/src/table-data-source.ts +++ b/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 extends DataSource { 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; } diff --git a/libs/examples/src/table/table-search-example/table-search-example.ts b/libs/examples/src/table/table-search-example/table-search-example.ts index d508968400..6b4395d742 100644 --- a/libs/examples/src/table/table-search-example/table-search-example.ts +++ b/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; constructor() { this.dataSource = new DtTableDataSource(this.data); } - ngOnInit(): void { + ngAfterViewInit(): void { this.dataSource.search = this.tableSearch; }