fix(datagrid): keep filter overlay open while typing

projects/angular/clarity.api.md

@@ -1138,6 +1138,8 @@ export class ClrDatagrid<T = any> implements AfterContentInit, AfterViewInit, On
     detailService: DetailService;
     // (undocumented)
     _displayedRows: ViewContainerRef;
+    // (undocumented)
+    el: ElementRef;
     // Warning: (ae-forgotten-export) The symbol "ExpandableRowsCount" needs to be exported by the entry point index.d.ts
     //
     // (undocumented)
@@ -1249,7 +1251,7 @@ export class ClrDatagridCell implements OnInit {
 export class ClrDatagridColumn<T = any> extends DatagridFilterRegistrar<T, ClrDatagridFilterInterface<T>> implements OnDestroy, OnInit, OnChanges {
     // Warning: (ae-forgotten-export) The symbol "Sort" needs to be exported by the entry point index.d.ts
     // Warning: (ae-forgotten-export) The symbol "FiltersProvider" needs to be exported by the entry point index.d.ts
-    constructor(_sort: Sort<T>, filters: FiltersProvider<T>, vcr: ViewContainerRef, detailService: DetailService, changeDetectorRef: ChangeDetectorRef);
+    constructor(_sort: Sort<T>, filters: FiltersProvider<T>, vcr: ViewContainerRef, detailService: DetailService, changeDetectorRef: ChangeDetectorRef, smartPositionService: ClrPopoverPositionService, smartEventsService: ClrPopoverEventsService, columnsService: ColumnsService);
     // (undocumented)
     get ariaSort(): "none" | "ascending" | "descending";
     // (undocumented)

projects/angular/src/data/datagrid/all.spec.ts

@@ -41,6 +41,7 @@ import DatagridRowSpecs from './datagrid-row.spec';
 import DatagridSpecs from './datagrid.spec';
 import { addHelpers } from './helpers.spec';
 import ColumnResizerServiceSpecs from './providers/column-resizer.service.spec';
+import ColumnsServiceSpec from './providers/columns.service.spec';
 import DisplayModeServiceSpecs from './providers/display-mode.service.spec';
 import FiltersProviderSpecs from './providers/filters.spec';
 import ItemsProviderSpecs from './providers/items.spec';
@@ -72,6 +73,7 @@ describe('Datagrid', function () {
     DisplayModeServiceSpecs();
     TableSizeServiceSpec();
     ColumnResizerServiceSpecs();
+    ColumnsServiceSpec();
   });
 
   describe('Components', function () {

projects/angular/src/data/datagrid/datagrid-column.ts

@@ -20,9 +20,12 @@ import {
   ViewContainerRef,
 } from '@angular/core';
 import { Subscription } from 'rxjs';
+import { debounceTime, skipWhile, tap } from 'rxjs/operators';
 
 import { HostWrapper } from '../../utils/host-wrapping/host-wrapper';
 import { ClrPopoverHostDirective } from '../../utils/popover/popover-host.directive';
+import { ClrPopoverEventsService } from '../../utils/popover/providers/popover-events.service';
+import { ClrPopoverPositionService } from '../../utils/popover/providers/popover-position.service';
 import { DatagridPropertyComparator } from './built-in/comparators/datagrid-property-comparator';
 import { DatagridNumericFilterImpl } from './built-in/filters/datagrid-numeric-filter-impl';
 import { DatagridPropertyNumericFilter } from './built-in/filters/datagrid-property-numeric-filter';
@@ -31,6 +34,7 @@ import { DatagridStringFilterImpl } from './built-in/filters/datagrid-string-fil
 import { ClrDatagridSortOrder } from './enums/sort-order.enum';
 import { ClrDatagridComparatorInterface } from './interfaces/comparator.interface';
 import { ClrDatagridFilterInterface } from './interfaces/filter.interface';
+import { ColumnsService } from './providers/columns.service';
 import { CustomFilter } from './providers/custom-filter';
 import { DetailService } from './providers/detail.service';
 import { FiltersProvider } from './providers/filters';
@@ -149,7 +153,10 @@ export class ClrDatagridColumn<T = any>
     filters: FiltersProvider<T>,
     private vcr: ViewContainerRef,
     private detailService: DetailService,
-    private changeDetectorRef: ChangeDetectorRef
+    private changeDetectorRef: ChangeDetectorRef,
+    private smartPositionService: ClrPopoverPositionService,
+    private smartEventsService: ClrPopoverEventsService,
+    private columnsService: ColumnsService
   ) {
     super(filters);
     this.subscriptions.push(this.listenForSortingChanges());
@@ -374,6 +381,21 @@ export class ClrDatagridColumn<T = any>
     });
   }
 
+  private listenForFilterChanges() {
+    return this.filter.changes
+      .pipe(
+        skipWhile(() => !!this.columnsService.host?.el?.nativeElement?.style.height),
+        tap(() => {
+          this.smartEventsService.removeScrollListener();
+          this.smartPositionService.realign();
+        }),
+        debounceTime(500)
+      )
+      .subscribe(() => {
+        this.smartEventsService.addScrollListener();
+      });
+  }
+
   private setupDefaultFilter(field: string, colType: 'string' | 'number') {
     if (colType === 'number') {
       this.setFilter(new DatagridNumericFilterImpl(new DatagridPropertyNumericFilter(field)));
@@ -387,5 +409,6 @@ export class ClrDatagridColumn<T = any>
       // if this field property is set again
       delete this.initFilterValue;
     }
+    this.subscriptions.push(this.listenForFilterChanges());
   }
 }

projects/angular/src/data/datagrid/datagrid.ts

@@ -142,15 +142,15 @@ export class ClrDatagrid<T = any> implements AfterContentInit, AfterViewInit, On
     private renderer: Renderer2,
     public detailService: DetailService,
     @Inject(DOCUMENT) private document: any,
-    private el: ElementRef,
+    public el: ElementRef,
     private page: Page,
     public commonStrings: ClrCommonStringsService,
     private columnsService: ColumnsService,
     private keyNavigation: KeyNavigationGridController,
     private zone: NgZone
   ) {
     const datagridId = uniqueIdFactory();
-
+    this.columnsService.host = this;
     this.selectAllId = 'clr-dg-select-all-' + datagridId;
     this.detailService.id = datagridId;
   }

projects/angular/src/data/datagrid/providers/columns.service.ts

@@ -7,12 +7,14 @@
 import { Injectable } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
 
+import { ClrDatagrid } from '../datagrid';
 import { ALL_COLUMN_CHANGES } from '../enums/column-changes.enum';
 import { ColumnState, ColumnStateDiff } from '../interfaces/column-state.interface';
 
 @Injectable()
 export class ColumnsService {
   columns: BehaviorSubject<ColumnState>[] = [];
+  host: ClrDatagrid;
 
   private _cache: ColumnState[] = [];