Merge branch 'master' into rkaraivanov/mep-broken-paths-and-exports

Author: rkaraivanov

projects/igniteui-angular/grids/core/src/filtering/base/grid-filtering-row.component.ts

@@ -12,11 +12,14 @@ import {
     ChangeDetectionStrategy,
     ViewRef,
     HostListener,
-    OnDestroy
+    OnDestroy,
+    InjectionToken,
+    inject,
+    OnInit
 } from '@angular/core';
 import { IgxFilteringService } from '../grid-filtering.service';
 import { Subject } from 'rxjs';
-import { takeUntil } from 'rxjs/operators';
+import { debounceTime, takeUntil } from 'rxjs/operators';
 import { ExpressionUI } from '../excel-style/common';
 import { NgTemplateOutlet, NgClass } from '@angular/common';
 import { IgxDropDownComponent, IgxDropDownItemComponent, IgxDropDownItemNavigationDirective, ISelectionEventArgs } from 'igniteui-angular/drop-down';
@@ -28,6 +31,14 @@ import { AbsoluteScrollStrategy, ColumnType, ConnectedPositioningStrategy, DataU
 import { IgxTimePickerComponent } from 'igniteui-angular/time-picker';
 import { IgxButtonDirective, IgxDateTimeEditorDirective, IgxIconButtonDirective, IgxRippleDirective } from 'igniteui-angular/directives';
 
+/**
+ * Injection token for setting the debounce time used in filtering row inputs.
+ * @hidden
+ */
+export const INPUT_DEBOUNCE_TIME = /*@__PURE__*/new InjectionToken<number>('INPUT_DEBOUNCE_TIME', {
+    factory: () => 350
+});
+
 /**
  * @hidden
  */
@@ -58,7 +69,7 @@ import { IgxButtonDirective, IgxDateTimeEditorDirective, IgxIconButtonDirective,
         IgxIconButtonDirective
     ]
 })
-export class IgxGridFilteringRowComponent implements AfterViewInit, OnDestroy {
+export class IgxGridFilteringRowComponent implements OnInit, AfterViewInit, OnDestroy {
     @Input()
     public get column(): ColumnType {
         return this._column;
@@ -198,7 +209,10 @@ export class IgxGridFilteringRowComponent implements AfterViewInit, OnDestroy {
     /** switch to icon buttons when width is below 432px */
     private readonly NARROW_WIDTH_THRESHOLD = 432;
 
+    private inputSubject: Subject<KeyboardEvent> = new Subject<KeyboardEvent>();
+
     private $destroyer = new Subject<void>();
+    private readonly DEBOUNCE_TIME = inject(INPUT_DEBOUNCE_TIME);
 
     constructor(
         public filteringService: IgxFilteringService,
@@ -207,12 +221,22 @@ export class IgxGridFilteringRowComponent implements AfterViewInit, OnDestroy {
         protected platform: PlatformUtil,
     ) { }
 
+    public ngOnInit(): void {
+        this.inputSubject.pipe(
+            debounceTime(this.DEBOUNCE_TIME),
+            takeUntil(this.$destroyer)
+        ).subscribe(event => {
+            this.handleInputChange(event);
+            this.cdr.markForCheck(); // ChangeDetectionStrategy.OnPush is not picking the latest changes of the updated value because of the async pipe + debounce.
+        });
+    }
+
     @HostListener('keydown', ['$event'])
     public onKeydownHandler(evt: KeyboardEvent) {
         if (this.platform.isFilteringKeyCombo(evt)) {
-                evt.preventDefault();
-                evt.stopPropagation();
-                this.close();
+            evt.preventDefault();
+            evt.stopPropagation();
+            this.close();
         }
     }
 
@@ -227,10 +251,10 @@ export class IgxGridFilteringRowComponent implements AfterViewInit, OnDestroy {
         }
 
         this.filteringService.grid.localeChange
-        .pipe(takeUntil(this.$destroyer))
-        .subscribe(() => {
-            this.cdr.markForCheck();
-        });
+            .pipe(takeUntil(this.$destroyer))
+            .subscribe(() => {
+                this.cdr.markForCheck();
+            });
 
         requestAnimationFrame(() => this.focusEditElement());
     }
@@ -337,6 +361,10 @@ export class IgxGridFilteringRowComponent implements AfterViewInit, OnDestroy {
      * Event handler for input on the input.
      */
     public onInput(eventArgs) {
+        this.inputSubject.next(eventArgs);
+    }
+
+    private handleInputChange(eventArgs) {
         if (!eventArgs) {
             return;
         }