Merge branch 'master' into fix-#4752-master

Author: simeonoff

projects/igniteui-angular/src/lib/grids/grid-header.component.ts

@@ -22,8 +22,8 @@ import { IgxGridBaseComponent, IGridDataBindable } from './grid-base.component';
 import { IgxColumnResizingService } from './grid-column-resizing.service';
 import { IgxOverlayService } from '../services/overlay/overlay';
 import { IgxGridExcelStyleFilteringComponent } from './filtering/excel-style/grid.excel-style-filtering.component';
-import { OverlaySettings, PositionSettings, VerticalAlignment, HorizontalAlignment } from '../services/overlay/utilities';
-import { ConnectedPositioningStrategy } from '../services/overlay/position/connected-positioning-strategy';
+import { OverlaySettings, PositionSettings, VerticalAlignment } from '../services/overlay/utilities';
+import { AutoPositionStrategy } from '../services/overlay/position/auto-position-strategy';
 import { useAnimation } from '@angular/animations';
 import { filter, takeUntil } from 'rxjs/operators';
 import { Subject } from 'rxjs';
@@ -203,23 +203,9 @@ export class IgxGridHeaderComponent implements DoCheck, OnInit, OnDestroy {
     private toggleFilterDropdown() {
         if (!this._componentOverlayId) {
             const headerTarget = this.elementRef.nativeElement;
+            const filterIconTarget = headerTarget.querySelector('.' + this.filterIconClassName);
 
-            const gridRect = this.grid.nativeElement.getBoundingClientRect();
-            const headerRect = headerTarget.getBoundingClientRect();
-
-            let x = headerRect.left;
-            let x1 = gridRect.left + gridRect.width;
-            x += window.pageXOffset;
-            x1 += window.pageXOffset;
-            if (Math.abs(x - x1) < 300) {
-                this._filterMenuOverlaySettings.positionStrategy.settings.horizontalDirection = HorizontalAlignment.Left;
-                this._filterMenuOverlaySettings.positionStrategy.settings.horizontalStartPoint = HorizontalAlignment.Right;
-            } else {
-                this._filterMenuOverlaySettings.positionStrategy.settings.horizontalDirection = HorizontalAlignment.Right;
-                this._filterMenuOverlaySettings.positionStrategy.settings.horizontalStartPoint = HorizontalAlignment.Left;
-            }
-
-            this._filterMenuOverlaySettings.positionStrategy.settings.target = headerTarget;
+            this._filterMenuOverlaySettings.positionStrategy.settings.target = filterIconTarget;
             this._filterMenuOverlaySettings.outlet = this.grid.outlet;
 
             this._componentOverlayId =
@@ -246,7 +232,7 @@ export class IgxGridHeaderComponent implements DoCheck, OnInit, OnDestroy {
         this._filterMenuOverlaySettings = {
             closeOnOutsideClick: true,
             modal: false,
-            positionStrategy: new ConnectedPositioningStrategy(this._filterMenuPositionSettings),
+            positionStrategy: new AutoPositionStrategy(this._filterMenuPositionSettings),
             scrollStrategy: new AbsoluteScrollStrategy()
         };
 

projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts

@@ -3929,6 +3929,33 @@ describe('IgxGrid - Filtering actions - Excel style filtering', () => {
             [ 'Select All', '20', '254' ],
             [ true, true, true ]);
     }));
+
+    it('Should display the ESF based on the filterIcon within the grid', async() => {
+        // Test prerequisites
+        grid.width = '800px';
+        fix.detectChanges();
+        for (const column of grid.columns) {
+            column.width = '300px';
+        }
+        grid.cdr.detectChanges();
+        await wait(16);
+
+        // Scroll a bit to the right, so the ProductName column is not fully visible.
+        grid.parentVirtDir.getHorizontalScroll().scrollLeft = 500;
+        await wait(100);
+        fix.detectChanges();
+        GridFunctions.clickExcelFilterIcon(fix, 'ProductName');
+        fix.detectChanges();
+
+        // Verify that the left, top and right borders of the ESF are within the grid.
+        const gridNativeElement = fix.debugElement.query(By.css('igx-grid')).nativeElement;
+        const gridRect = gridNativeElement.getBoundingClientRect();
+        const excelMenu = gridNativeElement.querySelector('.igx-excel-filter__menu');
+        const excelMenuRect = excelMenu.getBoundingClientRect();
+        expect(excelMenuRect.left >= gridRect.left).toBe(true, 'ESF spans outside the grid on the left');
+        expect(excelMenuRect.top >= gridRect.top).toBe(true, 'ESF spans outside the grid on the top');
+        expect(excelMenuRect.right <= gridRect.right).toBe(true, 'ESF spans outside the grid on the right');
+    });
 });
 
 const expectedResults = [];