diff --git a/projects/components/src/table/controls/table-controls.component.test.ts b/projects/components/src/table/controls/table-controls.component.test.ts index 0a473b844..643c7ad00 100644 --- a/projects/components/src/table/controls/table-controls.component.test.ts +++ b/projects/components/src/table/controls/table-controls.component.test.ts @@ -53,8 +53,6 @@ describe('Table Controls component', () => { }); spectator.triggerEventHandler(SearchBoxComponent, 'valueChange', 'testing'); - spectator.tick(200); - expect(onChangeSpy).toHaveBeenCalledWith('testing'); })); diff --git a/projects/components/src/table/controls/table-controls.component.ts b/projects/components/src/table/controls/table-controls.component.ts index caaff7710..6289032b4 100644 --- a/projects/components/src/table/controls/table-controls.component.ts +++ b/projects/components/src/table/controls/table-controls.component.ts @@ -9,9 +9,7 @@ import { Output } from '@angular/core'; import { IconType } from '@hypertrace/assets-library'; -import { SubscriptionLifecycle, TypedSimpleChanges } from '@hypertrace/common'; -import { Subject } from 'rxjs'; -import { debounceTime } from 'rxjs/operators'; +import { TypedSimpleChanges } from '@hypertrace/common'; import { IconSize } from '../../icon/icon-size'; import { MultiSelectJustify } from '../../multi-select/multi-select-justify'; import { MultiSelectSearchMode, TriggerLabelDisplayMode } from '../../multi-select/multi-select.component'; @@ -27,7 +25,6 @@ import { @Component({ selector: 'ht-table-controls', styleUrls: ['./table-controls.component.scss'], - providers: [SubscriptionLifecycle], changeDetection: ChangeDetectionStrategy.OnPush, template: `
@@ -38,6 +35,7 @@ import { *ngIf="this.searchEnabled" class="control search-box" [placeholder]="this.searchPlaceholder || this.DEFAULT_SEARCH_PLACEHOLDER" + [debounceTime]="400" (valueChange)="this.onSearchChange($event)" > @@ -152,17 +150,8 @@ export class TableControlsComponent implements OnChanges { return !!this.searchEnabled || this.viewToggleEnabled || this.selectControlsEnabled || this.checkboxControlsEnabled; } - private readonly searchDebounceSubject: Subject = new Subject(); - - public constructor( - private readonly subscriptionLifecycle: SubscriptionLifecycle, - private readonly differFactory: IterableDiffers - ) { + public constructor(private readonly differFactory: IterableDiffers) { this.checkboxDiffer = this.differFactory.find([]).create(); - - this.subscriptionLifecycle.add( - this.searchDebounceSubject.pipe(debounceTime(200)).subscribe(text => this.searchChange.emit(text)) - ); } public ngOnChanges(changes: TypedSimpleChanges): void { @@ -208,7 +197,7 @@ export class TableControlsComponent implements OnChanges { } public onSearchChange(text: string): void { - this.searchDebounceSubject.next(text); + this.searchChange.emit(text); } public onMultiSelectChange(select: TableSelectControl, selections: TableSelectControlOption[]): void {