fix(ESF): Ensure items visible in search list respect their current selection (#16745)

Author: gedinakova

projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.component.ts

@@ -412,8 +412,8 @@ export class IgxExcelStyleSearchComponent implements AfterViewInit, OnDestroy {
      * @hidden @internal
      */
     public get applyButtonDisabled(): boolean {
-        return (this._selectAllItem && !this._selectAllItem.isSelected && !this._selectAllItem.indeterminate) ||
-            (this.displayedListData && this.displayedListData.length === 0);
+        return ((this._selectAllItem && !this._selectAllItem.isSelected && !this._selectAllItem.indeterminate) ||
+            (this.displayedListData && this.displayedListData.length === 0)) && !this._addToCurrentFilterItem?.isSelected;
     }
 
     /**
@@ -542,11 +542,28 @@ export class IgxExcelStyleSearchComponent implements AfterViewInit, OnDestroy {
 
             selectedItems = this._hierarchicalSelectedItems;
         } else {
-            const item = this.displayedListData[1];
-            const addToCurrentFilterOptionVisible = item === this.addToCurrentFilterItem;
-            selectedItems = addToCurrentFilterOptionVisible && item.isSelected ?
-                this.esf.listData.slice(1, this.esf.listData.length).filter(el => el.isSelected || el.isFiltered) :
-                this.esf.listData.slice(1, this.esf.listData.length).filter(el => el.isSelected);
+            const addToCurrentFilter = this._addToCurrentFilterItem?.isSelected;
+            const displayedSet = new Set(this.displayedListData);
+            const listData = this.esf.listData;
+
+            for (let i = 1; i < listData.length; i++) {
+                const el = listData[i];
+                const isDisplayed = displayedSet.has(el);
+
+                if (isDisplayed) {
+                    if (el.isSelected) {
+                        selectedItems.push(el);
+                    }
+                } else if (addToCurrentFilter) {
+                    // Hidden items with "add to current filter": include if selected or filtered
+                    if (el.isSelected || el.isFiltered) {
+                        selectedItems.push(el);
+                    }
+                } else if (el.isSelected) {
+                    // Hidden items without "add to current filter": include if selected
+                    selectedItems.push(el);
+                }
+            }
         }
 
         let unselectedItem;

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

@@ -6013,6 +6013,39 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
             expect(checkboxes[0].indeterminate).toBeTrue();
         }));
 
+        it('Should enable the `Apply` button & filter properly when "Add to current filter selection" is the only selected option.', fakeAsync(() => {
+            // Open excel style custom filtering dialog.
+            GridFunctions.clickExcelFilterIconFromCode(fix, grid, 'Downloads');
+
+            // Type string in search box.
+            const searchComponent = GridFunctions.getExcelStyleSearchComponent(fix);
+            const inputNativeElement = GridFunctions.getExcelStyleSearchComponentInput(fix, searchComponent);
+            UIInteractions.clickAndSendInputElementValue(inputNativeElement, '5', fix);
+            fix.detectChanges();
+            tick();
+
+            const excelMenu = GridFunctions.getExcelStyleFilteringComponent(fix);
+            const checkboxes: any[] = Array.from(GridFunctions.getExcelStyleFilteringCheckboxes(fix, excelMenu));
+            expect(checkboxes.length).toBe(3);
+            checkboxes[0].click(); // Uncheck 'Select All'
+            checkboxes[1].click(); // Check 'Add to current filter selection'
+            fix.detectChanges();
+            tick();
+
+            // Click 'apply' button to apply filter.
+            const applyButton = GridFunctions.getApplyButtonExcelStyleFiltering(fix, excelMenu);
+            expect(applyButton.disabled).toBeFalse();
+            applyButton.click();
+            fix.detectChanges();
+            tick();
+
+            // Get the results and verify that they match the list items.
+            const gridCellValues = GridFunctions.getColumnCells(fix, 'Downloads');
+
+            // Record with '254' downloads is filtered out.
+            expect(gridCellValues.length).toEqual(7);
+        }));
+
         it('Should commit and close ESF on pressing \'Enter\'', fakeAsync(() => {
             // Open excel style filtering dialog.
             GridFunctions.clickExcelFilterIconFromCode(fix, grid, 'Downloads');