diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.component.ts index d366da1a43c..99d3462c329 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.component.ts +++ b/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; diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts index 1841cfe1279..3a4c7fe66d4 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts +++ b/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');