fix(grid): allow negative values in filter input

Author: MonikaKirkova

projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.ts

@@ -81,12 +81,13 @@ export class IgxGridFilteringRowComponent implements AfterViewInit, OnDestroy {
 
     @Input()
     public get value(): any {
-        return this.expression ? this.expression.searchVal : null;
+        return this._value;
     }
 
     public set value(val) {
-        if (!val && val !== 0 && this.expression.searchVal) {
+        if (!val && val !== 0 && (this.expression.searchVal || this.expression.searchVal === 0)) {
             this.expression.searchVal = null;
+            this._value = null;
             const index = this.expressionsList.findIndex(item => item.expression === this.expression);
             if (index === 0 && this.expressionsList.length === 1) {
                 this.filteringService.clearFilter(this.column.field);
@@ -98,11 +99,15 @@ export class IgxGridFilteringRowComponent implements AfterViewInit, OnDestroy {
                 return;
             }
         } else {
+            if (val === '') {
+                return;
+            }
             const oldValue = this.expression.searchVal;
             if (isEqual(oldValue, val)) {
                 return;
             }
 
+            this._value = val;
             this.expression.searchVal = DataUtil.parseValue(this.column.dataType, val);
             if (this.expressionsList.find(item => item.expression === this.expression) === undefined) {
                 this.addExpression(true);
@@ -194,6 +199,7 @@ export class IgxGridFilteringRowComponent implements AfterViewInit, OnDestroy {
     private isKeyPressed = false;
     private isComposing = false;
     private _cancelChipClick = false;
+    private _value = null;
     private _icons = [
         {
             name: 'clear',
@@ -289,6 +295,7 @@ export class IgxGridFilteringRowComponent implements AfterViewInit, OnDestroy {
         const selectedItem = this.expressionsList.find(expr => expr.isSelected === true);
         if (selectedItem) {
             this.expression = selectedItem.expression;
+            this._value = this.expression.searchVal;
         }
 
         this.filteringService.grid.localeChange
@@ -512,6 +519,7 @@ export class IgxGridFilteringRowComponent implements AfterViewInit, OnDestroy {
             this.removeExpression(indexToDeselect, this.expression);
         }
         this.resetExpression();
+        this._value = this.expression.searchVal;
         this.scrollChipsWhenAddingExpression();
     }
 
@@ -685,7 +693,7 @@ export class IgxGridFilteringRowComponent implements AfterViewInit, OnDestroy {
         item.isSelected = !item.isSelected;
         if (item.isSelected) {
             this.expression = item.expression;
-
+            this._value = this.expression.searchVal;
             this.focusEditElement();
         }
     }

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

@@ -42,7 +42,8 @@ import {
     IgxGridExternalESFComponent,
     IgxGridExternalESFTemplateComponent,
     IgxGridDatesFilteringComponent,
-    LoadOnDemandFilterStrategy
+    LoadOnDemandFilterStrategy,
+    IgxGridFilteringNumericComponent
 } from '../../test-utils/grid-samples.spec';
 import { GridSelectionMode, FilterMode, Size } from '../common/enums';
 import { ControlsFunction } from '../../test-utils/controls-functions.spec';
@@ -71,7 +72,8 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
                 IgxGridFilteringScrollComponent,
                 IgxGridFilteringMCHComponent,
                 IgxGridFilteringTemplateComponent,
-                IgxGridDatesFilteringComponent
+                IgxGridDatesFilteringComponent,
+                IgxGridFilteringNumericComponent
             ]
         });
     }));
@@ -904,6 +906,38 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
             expect(input.properties.readOnly).toBeTruthy();
         }));
 
+        it('should correctly filter negative values', fakeAsync(() => {
+            fix = TestBed.createComponent(IgxGridFilteringNumericComponent);
+            fix.detectChanges();
+            grid = fix.componentInstance.grid;
+
+            GridFunctions.clickFilterCellChip(fix, 'Number');
+
+            const filteringRow = fix.debugElement.query(By.directive(IgxGridFilteringRowComponent));
+            const input = filteringRow.query(By.directive(IgxInputDirective));
+
+            // Set input and confirm
+            GridFunctions.typeValueInFilterRowInput('-1', fix);
+
+            expect(input.componentInstance.value).toEqual('-1');
+            expect(grid.rowList.length).toEqual(1);
+
+            GridFunctions.typeValueInFilterRowInput('0', fix);
+
+            expect(input.componentInstance.value).toEqual('0');
+            expect(grid.rowList.length).toEqual(0);
+
+            GridFunctions.typeValueInFilterRowInput('-0.5', fix);
+
+            expect(input.componentInstance.value).toEqual('-0.5');
+            expect(grid.rowList.length).toEqual(1);
+
+            GridFunctions.typeValueInFilterRowInput('', fix);
+
+            expect(input.componentInstance.value).toEqual(null);
+            expect(grid.rowList.length).toEqual(3);
+        }));
+
         it('Should focus input .', fakeAsync(() => {
             GridFunctions.clickFilterCellChip(fix, 'ProductName');
 
@@ -2755,12 +2789,12 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
         it('Should not prevent mousedown event when target is within the filter cell template', fakeAsync(() => {
             const filterCell = GridFunctions.getFilterCell(fix, 'ProductName');
             const input = filterCell.query(By.css('input')).nativeElement;
- 
+
             const mousedownEvent = new MouseEvent('mousedown', { bubbles: true });
             const preventDefaultSpy = spyOn(mousedownEvent, 'preventDefault');
             input.dispatchEvent(mousedownEvent, { bubbles: true });
             fix.detectChanges();
- 
+
             expect(preventDefaultSpy).not.toHaveBeenCalled();
         }));
 
@@ -2772,7 +2806,7 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
             const preventDefaultSpy = spyOn(mousedownEvent, 'preventDefault');
             firstCell.dispatchEvent(mousedownEvent);
             fix.detectChanges();
-           
+
             expect(preventDefaultSpy).toHaveBeenCalled();
         }));
     });

projects/igniteui-angular/src/lib/test-utils/grid-samples.spec.ts

@@ -764,6 +764,17 @@ export class IgxGridFilteringComponent extends BasicGridComponent {
     }
 }
 
+@Component({
+    template: `<igx-grid [data]="data" height="500px" [allowFiltering]="true">
+        <igx-column width="100px" [field]="'Number'" [header]="'Number'" [filterable]="true" dataType="number"></igx-column>
+    </igx-grid>`,
+    standalone: true,
+    imports: [IgxGridComponent, IgxColumnComponent]
+})
+export class IgxGridFilteringNumericComponent extends BasicGridComponent {
+    public override data = SampleTestData.numericData();
+}
+
 @Component({
     template: `<igx-grid [data]="data" height="500px" [allowFiltering]="true">
         <igx-column width="100px" [field]="'ID'" [header]="'ID'" [hasSummary]="true"

projects/igniteui-angular/src/lib/test-utils/sample-test-data.spec.ts

@@ -68,6 +68,13 @@ export class SampleTestData {
         { Number: 3, String: '3', Boolean: true, Date: new Date(2018, 9, 22) }
     ]);
 
+    /* Fields: Number: number; 3 items. */
+    public static numericData = () => ([
+        { Number: -1 },
+        { Number: 2.5 },
+        { Number: -0.5 }
+    ]);
+
     /* Fields: Name: string, Avatar: string; 3 items. */
     public static personAvatarData = () => ([
         {