fix(datagrid): keep filter overlay open while typing

projects/angular/clarity.api.md

@@ -1249,14 +1249,16 @@ 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, elementRef: ElementRef);
     // (undocumented)
     get ariaSort(): "none" | "ascending" | "descending";
     // (undocumented)
     get colType(): 'string' | 'number';
     set colType(value: 'string' | 'number');
     customFilter: boolean;
     // (undocumented)
+    get datagridElementRef(): any;
+    // (undocumented)
     get field(): string;
     set field(field: string);
     // (undocumented)

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

@@ -9,6 +9,7 @@ import {
   ChangeDetectorRef,
   Component,
   ContentChild,
+  ElementRef,
   EventEmitter,
   Injector,
   Input,
@@ -20,9 +21,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';
@@ -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 elementRef: ElementRef
   ) {
     super(filters);
     this.subscriptions.push(this.listenForSortingChanges());
@@ -307,6 +314,10 @@ export class ClrDatagridColumn<T = any>
     return this.wrappedInjector.get(WrappedColumn, this.vcr).columnView;
   }
 
+  get datagridElementRef() {
+    return this.elementRef?.nativeElement?.closest('clr-datagrid');
+  }
+
   ngOnInit() {
     this.wrappedInjector = new HostWrapper(WrappedColumn, this.vcr);
   }
@@ -374,6 +385,21 @@ export class ClrDatagridColumn<T = any>
     });
   }
 
+  private listenForFilterChanges() {
+    return this.filter.changes
+      .pipe(
+        skipWhile(() => !!this.datagridElementRef?.style.height === true),
+        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 +413,6 @@ export class ClrDatagridColumn<T = any>
       // if this field property is set again
       delete this.initFilterValue;
     }
+    this.subscriptions.push(this.listenForFilterChanges());
   }
 }