Merge pull request #15928 from IgniteUI/ganastasov/fix-15808-20.0

fix(excel-style-filtering): allow negative decimal values for numeric columns - 20.0.x

Author: kacheshmarova

projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-default-expression.component.html

@@ -30,8 +30,8 @@
         [placeholder]="inputValuePlaceholder"
         [disabled]="expressionUI.expression.condition && expressionUI.expression.condition.isUnary"
         autocomplete="off"
-        [value]="expressionUI.expression.searchVal"
-        (input)="onValuesInput($event)"
+        [(ngModel)]="expressionUI.expression.searchVal"
+        (blur)="updateSearchValueOnBlur($event)"
     />
 </igx-input-group>
 

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

@@ -7,6 +7,7 @@ import {
     ChangeDetectorRef,
     ViewChild
 } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 import { IgxButtonGroupComponent } from '../../../buttonGroup/buttonGroup.component';
 import { GridColumnDataType, DataUtil } from '../../../data-operations/data-util';
 import { IFilteringOperation } from '../../../data-operations/filtering-condition';
@@ -41,7 +42,7 @@ export interface ILogicOperatorChangedArgs extends IBaseEventArgs {
 @Component({
     selector: 'igx-excel-style-default-expression',
     templateUrl: './excel-style-default-expression.component.html',
-    imports: [IgxSelectComponent, IgxPrefixDirective, IgxIconComponent, IgxSelectItemComponent, IgxInputGroupComponent, IgxInputDirective, IgxButtonDirective, IgxButtonGroupComponent, IgxOverlayOutletDirective, IgxIconButtonDirective]
+    imports: [FormsModule, IgxSelectComponent, IgxPrefixDirective, IgxIconComponent, IgxSelectItemComponent, IgxInputGroupComponent, IgxInputDirective, IgxButtonDirective, IgxButtonGroupComponent, IgxOverlayOutletDirective, IgxIconButtonDirective]
 })
 export class IgxExcelStyleDefaultExpressionComponent implements AfterViewInit {
     @Input()
@@ -163,7 +164,7 @@ export class IgxExcelStyleDefaultExpressionComponent implements AfterViewInit {
         return this.grid.resourceStrings[`igx_grid_filter_${name}`] || name;
     }
 
-    public onValuesInput(eventArgs) {
+    public updateSearchValueOnBlur(eventArgs) {
         this.expressionUI.expression.searchVal = DataUtil.parseValue(this.column.dataType, eventArgs.target.value);
     }
 

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

@@ -3814,12 +3814,15 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
 
             // set first expression's value
             GridFunctions.setInputValueESF(fix, 0, 0);
+            tick(100);
 
             // select second expression's operator
             GridFunctions.setOperatorESF(fix, 1, 1);
+            tick(100);
 
             // set second expression's value
             GridFunctions.setInputValueESF(fix, 1, 20);
+            tick(100);
 
             GridFunctions.clickApplyExcelStyleCustomFiltering(fix);
 
@@ -6302,6 +6305,55 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
                 expect(input.value).toBe('');
             });
         }));
+
+        it('should correctly filter negative decimal values in Excel Style filtering', fakeAsync(() => {
+            GridFunctions.clickExcelFilterIcon(fix, 'Downloads');
+            tick();
+            fix.detectChanges();
+
+            GridFunctions.clickExcelFilterCascadeButton(fix);
+            tick();
+            fix.detectChanges();
+
+            GridFunctions.clickOperatorFromCascadeMenu(fix, 2);
+            tick();
+            fix.detectChanges();
+
+            GridFunctions.setInputValueESF(fix, 0, '-1');
+            tick(100);
+            fix.detectChanges();
+            expect(GridFunctions.getExcelFilteringInput(fix, 0).value).toBe('-1');
+
+            const applyButton = GridFunctions.getApplyExcelStyleCustomFiltering(fix);
+            applyButton.click();
+            tick(100);
+            fix.detectChanges();
+
+            expect(grid.filteredData.length).toBe(8);
+
+            GridFunctions.clickExcelFilterIcon(fix, 'Downloads');
+            tick();
+            fix.detectChanges();
+
+            GridFunctions.clickExcelFilterCascadeButton(fix);
+            tick();
+            fix.detectChanges();
+
+            GridFunctions.clickOperatorFromCascadeMenu(fix, 2);
+            tick();
+            fix.detectChanges();
+
+            GridFunctions.setInputValueESF(fix, 0, '-0.1');
+            tick(100);
+            fix.detectChanges();
+            expect(GridFunctions.getExcelFilteringInput(fix, 0).value).toBe('-0.1');
+
+            applyButton.click();
+            tick(100);
+            fix.detectChanges();
+
+            expect(grid.filteredData.length).toBe(8);
+        }));
     });
 
     describe('Templates: ', () => {